redux主要由Store、Action、Reducer三部分組成
Store用于存盤和管理StateAction用于用戶觸發的一種行為Reducer用于根據Action產生新的State
flutter redux流程
Widget通過StoreConnector系結Store中的State資料Widget通過Action觸發一種新的行為Reducer根據收到的Action更新State- 更新
Store中的State系結的Widget
根據以上流程，我們實作專案中的主題切換功能，
專案集成
flutter redux庫
pub.dev地址 github地址
集成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)));
},
);
}
}
復制代碼運行效果
執行代碼，效果如下
源代碼
專案地址-OpenGit客戶端
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/197845.html
標籤：其他