fish_redux使用详解---看完就会用！ (13)

这里面仅仅改动了一行，在AppBar里面加了backgroundColor，然后使用state里面的全局主题色

Widget buildView(CountState state, Dispatch dispatch, ViewService viewService) { return _bodyWidget(state, dispatch); } Widget _bodyWidget(CountState state, Dispatch dispatch) { return Scaffold( appBar: AppBar( title: Text("FishRedux"), ///全局主题，仅仅在此处改动了一行 backgroundColor: state.store.themeColor, ), ///下面其余代码省略.... }

如果其他模块也需要做主题色，也按照此处逻辑改动即可

调用

调用和上面说的一样，用下述全局方式在合适的地方调用

GlobalStore.store.dispatch(GlobalActionCreator.onChangeThemeColor()); 体验

通过上面的优化，使用体验提升不是一个级别，大大提升的全局模式的扩展性，我们就算后期增加了大量的全局字段，也可以一个个模块慢慢改，不用一次爆肝全改完，猝死的概率又大大减少了！

Component使用

Component是个比较常用的模块，上面使用列表的时候，就使用到了Component，这次我们来看看，在页面中直接使用Component，可插拔式使用！Component的使用总的来说是比较简单了，比较关键的是在State中建立起连接。

效果图

上图的效果是在页面中嵌入了俩个Component，改变子Component的操作是在页面中完成的

先看下页面结构

Component

这地方写了一个Component，代码很简单，来看看吧

component

这地方代码是自动生成了，没有任何改动，就不贴了

state

initState()：我们需要注意，Component中的initState()方法在内部没有调用，虽然自动生成的代码有这个方法，但是无法起到初始化作用，可以删掉该方法

class AreaState implements Cloneable<AreaState> { String title; String text; Color color; AreaState({ this.title = "", this.color = Colors.blue, this.text = "", }); @override AreaState clone() { return AreaState() ..color = color ..text = text ..title = title; } }

view

Widget buildView( AreaState state, Dispatch dispatch, ViewService viewService) { return Scaffold( appBar: AppBar( title: Text(state.title), automaticallyImplyLeading: false, ), body: Container( height: double.infinity, width: double.infinity, alignment: Alignment.center, color: state.color, child: Text(state.text), ), ); } Page

CompPage中，没用到effete这层，就没创建该文件，老规矩，先看看state

state

这地方是非常重要的地方，XxxxConnecto的实现形式是看官方代码写的

computed()：该方法是必须实现的，这个类似直接的get()方法，但是切记不能像get()直接返回state.leftAreaState()或state.rightAreaState，某些场景初始化无法刷新，因为是同一个对象，会被判断未更改，所以会不刷新控件

注意了注意了，这边做了优化，直接返回clone方法，这是对官方赋值写法的一个优化，也可以避免上面说的问题，大家可以思考思考

set()：该方法是Component数据流回推到页面的state，保持俩者state数据一致；如果Component模块更新了自己的State，不写这个方法会报错的

class CompState implements Cloneable<CompState> { AreaState leftAreaState; AreaState rightAreaState; @override CompState clone() { return CompState() ..rightAreaState = rightAreaState ..leftAreaState = leftAreaState; } } CompState initState(Map<String, dynamic> args) { ///初始化数据 return CompState() ..rightAreaState = AreaState( title: "LeftAreaComponent", text: "LeftAreaComponent", color: Colors.indigoAccent, ) ..leftAreaState = AreaState( title: "RightAreaComponent", text: "RightAreaComponent", color: Colors.blue, ); } ///左边Component连接器 class LeftAreaConnector extends ConnOp<CompState, AreaState> with ReselectMixin<CompState, AreaState> { @override AreaState computed(CompState state) { return state.leftAreaState.clone(); } @override void set(CompState state, AreaState subState) { state.leftAreaState = subState; } } ///右边Component连接器 class RightAreaConnector extends ConnOp<CompState, AreaState> with ReselectMixin<CompState, AreaState> { @override AreaState computed(CompState state) { return state.rightAreaState.clone(); } @override void set(CompState state, AreaState subState) { state.rightAreaState = subState; } }

page