组件构成-component

#####Demo地址

######看下他们之间的关系

######他们的构成关系可以划分为一下几个部分

• state->connector->component
• page->dependencies->IdentifierKey->connector+component
• view->widget(viewService.buildComponent(IdentifierKey))
  ######通过component构建界面，分布式管理state，代码解耦合，代码可读性极大程度提高

######我们来看一个截图

######使用fish_redux的component组件实现上图效果
先创建界面，如下图，全部是由FishReduxTemplate快捷创建fish_redux目录统一创建

由于是静态界面，只是做例子使用，只是在代码中添加了page,view,state三个界面数据，我们看下代码

• 主界面page页面，对应注释已添加

class ComponentTestPage extends Page<ComponentTestState, Map<String, dynamic>> {ComponentTestPage(): super(initState: initState,effect: buildEffect(),reducer: buildReducer(),view: buildView,dependencies: Dependencies<ComponentTestState>(adapter: null,slots: <String, Dependent<ComponentTestState>>{//leftComponent/rightComponent为对应组件的唯一标识符//Connector为连接器，可以理解为数据传递器//Component为对应的组件'leftComponent':CatalogueLeftConnector() + CatalogueLeftComponent(),'rightComponent':CatalogueRightConnector() + CatalogueRightComponent(),}),middleware: <Middleware<ComponentTestState>>[],);
}

• 主界面state

class ComponentTestState implements Cloneable<ComponentTestState> {CatalogueLeftState leftState;CatalogueRightState rightState;@overrideComponentTestState clone() {return ComponentTestState()..leftState = leftState..rightState = rightState;}
}//初始化
ComponentTestState initState(Map<String, dynamic> args) {var state = ComponentTestState();final List<String> li =List<String>.generate(20, (i) => 'left_item_custom_model ${i + 1}');final List<String> ri =List<String>.generate(20, (i) => 'right_item_custom_model ${i + 100}');state.leftState = CatalogueLeftState(leftItems: li);state.rightState = CatalogueRightState(rightItems: ri);return state;
}//左边组件连接器
class CatalogueLeftConnectorextends ConnOp<ComponentTestState, CatalogueLeftState> {@overrideCatalogueLeftState get(ComponentTestState state) {// TODO: implement getreturn state.leftState;}@overridevoid set(ComponentTestState state, CatalogueLeftState subState) {// TODO: implement setstate.leftState = subState;}
}//右边组件连接器
class CatalogueRightConnectorextends ConnOp<ComponentTestState, CatalogueRightState> {@overrideCatalogueRightState get(ComponentTestState state) {// TODO: implement getreturn state.rightState;}@overridevoid set(ComponentTestState state, CatalogueRightState subState) {// TODO: implement setstate.rightState = subState;}
}

• 主界面view展示页面

Widget buildView(ComponentTestState state, Dispatch dispatch, ViewService viewService) {return Scaffold(appBar: AppBar(title: Text('Component'),),body: _getBody(state, dispatch, viewService),);
}Widget _getBody(ComponentTestState state, Dispatch dispatch, ViewService viewService) {return Row(children: <Widget>[_getLeft(viewService),_getRight(viewService),],);
}//左视图
Expanded _getLeft(ViewService viewService) {return Expanded(flex: 1,child: Container(decoration: BoxDecoration(color: Colors.cyan),child: viewService.buildComponent('leftComponent'),),);
}//右视图
Expanded _getRight(ViewService viewService) {return Expanded(flex: 3,child: Container(margin: const EdgeInsets.only(left: 10),decoration: BoxDecoration(color: Colors.black.withOpacity(0.1)),child: viewService.buildComponent('rightComponent'),),);
}

######主界面构建完成，因为本文讲解只是涉及component,因此，对应的component中的widget构建，使用的是基本的ListView，所以不再进行赘述，有兴趣可以下载代码看看，欢迎留言简信我
#####Demo地址