首先需要创建adapter文件，然后写入下面代码：这地方需要继承SourceFlowAdapter适配器，里面的泛型需要填入ListState，ListState这地方会报错，因为我们的ListState没有继承MutableSource，下面state的调整就是对这个的处理
ListItemAdapter的构造函数就是通用的写法了，在super里面写入我们上面写好item样式，这是个pool应该可以理解为样式池，这个key最好都提出来，因为在state模块还需要用到，可以定义多个不同的item，很容易做成多样式item的列表；目前，我们这边只需要用一个，填入：ItemComponent()
class ListItemAdapter extends SourceFlowAdapter<ListState> { static const String item_style = "project_tab_item"; ListItemAdapter() : super( pool: <String, Component<Object>>{ ///定义item的样式 item_style: ItemComponent(), }, ); }state调整
state文件中的代码需要做一些调整，需要继承相应的类，和adapter建立起关联
ListState需要继承MutableSource；还必须定义一个泛型是item的ItemState类型的List，这俩个是必须的；然后实现相应的抽象方法就行了
这里只要向items里写入ItemState的数据，列表就会更新了
class ListState extends MutableSource implements Cloneable<ListState> { ///这地方一定要注意,List里面的泛型,需要定义为ItemState ///怎么更新列表数据,只需要更新这个items里面的数据,列表数据就会相应更新 ///使用多样式,请写出 List<Object> items; List<ItemState> items; @override ListState clone() { return ListState()..items = items; } ///使用上面定义的List,继承MutableSource,就把列表和item绑定起来了 @override Object getItemData(int index) => items[index]; @override String getItemType(int index) => ListItemAdapter.item_style; @override int get itemCount => items.length; @override void setItemData(int index, Object data) { items[index] = data; } } ListState initState(Map<String, dynamic> args) { return ListState(); }page中绑定adapter
这里就是将我们的ListSate和ListItemAdapter适配器建立起连接
class ListPage extends Page<ListState, Map<String, dynamic>> { ListPage() : super( initState: initState, effect: buildEffect(), reducer: buildReducer(), view: buildView, dependencies: Dependencies<ListState>( ///绑定Adapter adapter: NoneConn<ListState>() + ListItemAdapter(), slots: <String, Dependent<ListState>>{}), middleware: <Middleware<ListState>>[], ); }正常page页面编辑
整体流程
view模块编写 ---> action添加更新数据事件 ---> effect初始化时获取数据并处理 ---> reducer更新数据
view
这里面的列表使用就相当简单了，填入itemBuilder和itemCount参数就行了，这里就需要用viewService参数了哈
Widget buildView(ListState state, Dispatch dispatch, ViewService viewService) { return Scaffold( appBar: AppBar( title: Text("ListPage"), ), body: _itemWidget(state, viewService), ); } Widget _itemWidget(ListState state, ViewService viewService) { if (state.items != null) { ///使用列表 return ListView.builder( itemBuilder: viewService.buildAdapter().itemBuilder, itemCount: viewService.buildAdapter().itemCount, ); } else { return Center( child: CircularProgressIndicator(), ); } }action
只需要写个更新items的事件就ok了
enum ListAction { updateItem } class ListActionCreator { static Action updateItem(var list) { return Action(ListAction.updateItem, payload: list); } }effect
Lifecycle.initState是进入页面初始化的回调，这边可以直接用这个状态回调，来请求接口获取相应的数据，然后去更新列表