共计 8015 个字符，预计需要花费 21 分钟才能阅读完成。
redux 次要由Store、Action、Reducer三局部组成
- Store用于存储和治理State
- Action用于用户触发的一种行为
-
Reducer用于依据 Action 产生新的State
flutter redux 流程
1.Widget通过StoreConnector绑定Store中的State数据
2.Widget通过Action触发一种新的行为
3.Reducer依据收到的Action更新State
4. 更新Store中的State绑定的Widget
依据以上流程，咱们实现我的项目中的主题切换性能。我的项目集成
flutter redux 库
集成 flutter redux
批改我的项目根目录下pubspec.yaml，并增加依赖
flutter_redux: ^0.5.3 初始化 Store
首先看下Store的构造函数，如上面代码所示
Store( this.reducer, { State initialState, List<Middleware<State>> middleware = const [], bool syncStream: false, bool distinct: false, }) : _changeController = new StreamController.broadcast(sync: syncStream) { _state = initialState; _dispatchers = _createDispatchers( middleware, _createReduceAndNotify(distinct), ); }依据下面的构造函数，咱们首先须要创立State，并且还须要实现State初始化；而后须要创立Reducer；最初须要创立Middleware（暂不是本文须要解说的内容）；
创立 State
创立一个State对象AppState, 用于贮存须要共享的主题数据，并且实现AppState初始化工作，如上面代码所示
class AppState {
ThemeData themeData;
AppState({this.themeData});
factory AppState.initial() => AppState(themeData: AppTheme.theme);
}AppTheme类中定义了一个默认主题theme，如上面代码所示
class AppTheme {static final ThemeData _themeData = new ThemeData.light();
static get theme {
return _themeData.copyWith(primaryColor: Colors.black,);
}
}到此，实现了 State 的相干操作。
创立 Reducer
创立一个Reducer办法appReducer, 为AppState类里的每一个参数创立一个Reducer，如上面代码所示
AppState appReducer(AppState state, action) {
return AppState(themeData: themeReducer(state.themeData, action),
);
}而themeReducer将 ThemeData 和所有跟切换主题的行为绑定在一起, 如上面代码所示
final themeReducer = combineReducers<ThemeData>([TypedReducer<ThemeData, RefreshThemeDataAction>(_refresh),
]);
ThemeData _refresh(ThemeData themeData, action) {
themeData = action.themeData;
return themeData;
}通过flutter redux的combineReducers与TypedReducer将RefreshThemeDataAction和_refresh绑定在一起，当用户每次收回RefreshThemeDataAction时，都会触发_refresh, 用来更新themeData。
创立 Action
创立一个Action对象RefreshThemeDataAction, 如上面代码所示
class RefreshThemeDataAction{
final ThemeData themeData;
RefreshThemeDataAction(this.themeData);
}RefreshThemeDataAction的参数 themeData 是用来接管新切换的主题。
代码集成
创立Store所有的筹备工作都已筹备，上面创立Store，如上面代码所示
final store = new Store<AppState>(
appReducer,
initialState: AppState.initial(),);而后用StoreProvider加载 store,MaterialApp通过StoreConnector与Store放弃连贯。到此咱们曾经实现了flutter redux的初始化工作，如上面代码所示
void main() {
final store = new Store<AppState>(
appReducer,
initialState: AppState.initial(),);
runApp(OpenGitApp(store));
}
class OpenGitApp extends StatelessWidget {
final Store<AppState> store;
OpenGitApp(this.store);
@override
Widget build(BuildContext context) {
return new StoreProvider<AppState>(
store: store,
child: StoreConnector<AppState, _ViewModel>(
converter: _ViewModel.fromStore,
builder: (context, vm) {
return new MaterialApp(
theme: vm.themeData,
routes: AppRoutes.getRoutes(),);
},
),
);
}
}StoreConnector通过converter在_ViewModel中转化store.state的数据，最初通过builder返回理论须要更新主题的控件，这样就实现了数据和控件的绑定。_ViewModel的代码如上面所示
class _ViewModel {
final ThemeData themeData;
_ViewModel({this.themeData});
static _ViewModel fromStore(Store<AppState> store) {
return _ViewModel(themeData: store.state.themeData,);
}
}用户行为
最初，只须要增加切换主题局部的代码即可，这部分代码是从官网gallery demo 里的 Style/Colors copy 进去的，不做过多剖析，如上面代码所示
const double kColorItemHeight = 48.0;
class Palette {Palette({this.name, this.primary, this.accent, this.threshold = 900});
final String name;
final MaterialColor primary;
final MaterialAccentColor accent;
final int
threshold; // titles for indices > threshold are white, otherwise black
bool get isValid => name != null && primary != null && threshold != null;
}
final List<Palette> allPalettes = <Palette>[
new Palette(
name: 'RED',
primary: Colors.red,
accent: Colors.redAccent,
threshold: 300),
new Palette(
name: 'PINK',
primary: Colors.pink,
accent: Colors.pinkAccent,
threshold: 200),
new Palette(
name: 'PURPLE',
primary: Colors.purple,
accent: Colors.purpleAccent,
threshold: 200),
new Palette(
name: 'DEEP PURPLE',
primary: Colors.deepPurple,
accent: Colors.deepPurpleAccent,
threshold: 200),
new Palette(
name: 'INDIGO',
primary: Colors.indigo,
accent: Colors.indigoAccent,
threshold: 200),
new Palette(
name: 'BLUE',
primary: Colors.blue,
accent: Colors.blueAccent,
threshold: 400),
new Palette(
name: 'LIGHT BLUE',
primary: Colors.lightBlue,
accent: Colors.lightBlueAccent,
threshold: 500),
new Palette(
name: 'CYAN',
primary: Colors.cyan,
accent: Colors.cyanAccent,
threshold: 600),
new Palette(
name: 'TEAL',
primary: Colors.teal,
accent: Colors.tealAccent,
threshold: 400),
new Palette(
name: 'GREEN',
primary: Colors.green,
accent: Colors.greenAccent,
threshold: 500),
new Palette(
name: 'LIGHT GREEN',
primary: Colors.lightGreen,
accent: Colors.lightGreenAccent,
threshold: 600),
new Palette(
name: 'LIME',
primary: Colors.lime,
accent: Colors.limeAccent,
threshold: 800),
new Palette(name: 'YELLOW', primary: Colors.yellow, accent: Colors.yellowAccent),
new Palette(name: 'AMBER', primary: Colors.amber, accent: Colors.amberAccent),
new Palette(
name: 'ORANGE',
primary: Colors.orange,
accent: Colors.orangeAccent,
threshold: 700),
new Palette(
name: 'DEEP ORANGE',
primary: Colors.deepOrange,
accent: Colors.deepOrangeAccent,
threshold: 400),
new Palette(name: 'BROWN', primary: Colors.brown, threshold: 200),
new Palette(name: 'GREY', primary: Colors.grey, threshold: 500),
new Palette(name: 'BLUE GREY', primary: Colors.blueGrey, threshold: 500),
];
class ColorItem extends StatelessWidget {
const ColorItem(
{Key key,
@required this.index,
@required this.color,
this.prefix = '',
this.onChangeTheme})
: assert(index != null),
assert(color != null),
assert(prefix != null),
super(key: key);
final int index;
final Color color;
final String prefix;
final Function(Color) onChangeTheme;
String colorString() =>
"#${color.value.toRadixString(16).padLeft(8,'0').toUpperCase()}";
@override
Widget build(BuildContext context) {
return new Semantics(
container: true,
child: new Container(
height: kColorItemHeight,
padding: const EdgeInsets.symmetric(horizontal: 16.0),
color: color,
child: new SafeArea(
top: false,
bottom: false,
child: FlatButton(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[new Text('$prefix$index'),
new Text(colorString()),
],
),
onPressed: () {onChangeTheme(color);
},
),
),
),
);
}
}
class PaletteTabView extends StatelessWidget {
static const List<int> primaryKeys = const <int>[
50,
100,
200,
300,
400,
500,
600,
700,
800,
900
];
static const List<int> accentKeys = const <int>[100, 200, 400, 700];
PaletteTabView({Key key, @required this.colors, this.onChangeTheme})
: assert(colors != null && colors.isValid),
super(key: key);
final Palette colors;
final Function(Color) onChangeTheme;
@override
Widget build(BuildContext context) {final TextTheme textTheme = Theme.of(context).textTheme;
final TextStyle whiteTextStyle =
textTheme.body1.copyWith(color: Colors.white);
final TextStyle blackTextStyle =
textTheme.body1.copyWith(color: Colors.black);
final List<Widget> colorItems = primaryKeys.map((int index) {
return new DefaultTextStyle(
style: index > colors.threshold ? whiteTextStyle : blackTextStyle,
child: new ColorItem(
index: index,
color: colors.primary[index],
onChangeTheme: onChangeTheme),
);
}).toList();
if (colors.accent != null) {colorItems.addAll(accentKeys.map((int index) {
return new DefaultTextStyle(
style: index > colors.threshold ? whiteTextStyle : blackTextStyle,
child: new ColorItem(
index: index,
color: colors.accent[index],
prefix: 'A',
onChangeTheme: onChangeTheme),
);
}).toList());
}
return new ListView(
itemExtent: kColorItemHeight,
children: colorItems,
);
}
}
class ThemeSelectPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StoreConnector<AppState, _ViewModel>(
converter: _ViewModel.fromStore,
builder: (context, vm) {
return new DefaultTabController(
length: allPalettes.length,
child: new Scaffold(
appBar: new AppBar(
elevation: 0.0,
title: const Text("主题色"),
bottom: new TabBar(
isScrollable: true,
tabs: allPalettes
.map((Palette swatch) => new Tab(text: swatch.name))
.toList(),),
),
body: new TabBarView(children: allPalettes.map((Palette colors) {
return new PaletteTabView(
colors: colors,
onChangeTheme: vm.onChangeTheme,
);
}).toList(),),
),
);
});
}
}
class _ViewModel {final Function(Color) onChangeTheme;
_ViewModel({this.onChangeTheme});
static _ViewModel fromStore(Store<AppState> store) {
return _ViewModel(onChangeTheme: (color) {SharedPrfUtils.saveInt(SharedPrfKey.SP_KEY_THEME_COLOR, color.value);
store.dispatch(RefreshThemeDataAction(AppTheme.changeTheme(color)));
},
);
}
}运行成果
执行代码，成果如下
正文完
