[Flutter] fish_redux连接器Connector和Adapter

Page连接Component

Page连接他的component，通过连接器connector

每一个component都需要一个connector来进行和page的连接，

Component和Component的连接同理，一模一样。

比如有一个Page : homepage，有一个List组件作为Componet: list，现在要要连接在一起。

STEP01

在Page页的state下创建list的连接器

///Page state
class ListConnector extends ConnOp<TabbarState, ListState> {
  @override
  ListState? get(TabbarState state) {
    return state.listState;
  }

  @override
  void set(TabbarState state, ListState subState) {
    state.listState = subState;
  }
}

STEP02

在Page页面的page页面将connector和component连接在一起，注意实在slots插槽里

///Page page
dependencies: Dependencies<TabbarState>(
    adapter: null,
    slots: <String, Dependent<TabbarState>>{
        'listComponent':ListConnector()+ListComponent(),
    }),

STEP03

连接完成，在Page的view页面通过viewService.buildComponent(name)引用component

viewService.buildComponent(name)返回的是一个widget

///Page view
container(
child:viewService.buildComponent('listComponent'),
)

ListView与item连接

和page连接component 或 component连接component 不同，它不再需要connector，ListView有专门的连接器adapter去连接它的item。

STEP01

建立adapter（姑且叫适配器，是为了list连接itemComponent

///list adapter
lass ListItemAdapter extends SourceFlowAdapter<ListState> {
    static const String item_style = "project_tab_item";
    ListItemAdapter()
        : super(
            pool: <String, Component<Object>>{
                ///指定itemComponent
                item_style: ItemComponent(),
            },
        );
}

STEP02

listComponent连接适配器ListItemAdapter

///list component
class ListComponent extends Component<ListState> {
  ListComponent()
      : super(
            effect: buildEffect(),
            reducer: buildReducer(),
            view: buildView,
            dependencies: Dependencies<ListState>(
                adapter: NoneConn<ListState>() + ListItemAdapter(),
                slots: <String, Dependent<ListState>>{
                }),);

}

STEP03

在ListView页面的state将adapter和item绑定

/// list state
class ListState extends MutableSource implements Cloneable<ListState> {
    List<Object> 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();
}

STEP04

连接完成，在view页面就可以用ListView了

///list view
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(),
    );
  }
}

标签：ListState,Flutter,Adapter,component,Page,item,state,连接器,连接
来源： https://www.cnblogs.com/TobuTobu/p/15968027.html