fish-redux之 adapter基礎(chǔ)使用

官方文檔介紹

adapter為fish_redux團(tuán)隊(duì)對listView的優(yōu)化封裝，適用于長列表渲染，其中實(shí)現(xiàn)方式有以下三種
  • DynamicFlowAdapter 接受數(shù)組類型的數(shù)據(jù)驅(qū)動
  • StaticFlowAdapter 接受map類型的數(shù)據(jù)驅(qū)動
  • CustomAdapter 自定義 adapter
  1. DynamicFlowAdapter
class ListGroupAdapter extends DynamicFlowAdapter<AdapterTestState> {
  ListGroupAdapter()
      : super(pool: <String, Component<Object>>{
          'header': ListHeaderComponent(),
          'cell': ListCellComponent(),
          'footer': ListFooterComponent()
        }, connector: ListGroupConnector());
}

class ListGroupConnector extends ConnOp<AdapterTestState, List<ItemBean>> {
  @override
  List<ItemBean> get(AdapterTestState state) {
    List<ItemBean> items = [];
    if (state.cellModels.length == 0) {
      return items;
    }
    items.add(ItemBean('header', state.headerModel));
    for (var cellModel in state.cellModels) {
      items.add(ItemBean('cell', cellModel));
    }
    items.add(ItemBean('footer', state.footerStr));
    return items;
  }
}
  • 主要由兩部分組成，分別是adapter和connector(連接器)
  • adapter-pool 聲明依賴組件，內(nèi)部通過唯一標(biāo)識符進(jìn)行標(biāo)記，注意一點(diǎn)是connector中的唯一標(biāo)識符，他們需要一樣
  • adapter-connector 數(shù)據(jù)源操作，可以看到ListGroupConnector為數(shù)據(jù)源處理，唯一標(biāo)識符必須和adapter-pool中的一致，數(shù)據(jù)源封裝是通過fish_redux開出的ItemBean
  1. StaticFlowAdapter

class SomeStaticAdapter extends StaticFlowAdapter<PageState> {
  SomeStaticAdapter()
    : super(
      slots: [
        SomeComponent().asDependent(SomeComponenConnectt()),
        TaskAdapter().asDependent(TaskAdapterConnect()),
      ],
    );
  • StaticFlowAdapter接收 map 類型的數(shù)據(jù)
  • StaticFlowAdapter 沒有 pool 屬性，但是有 slots，其他的屬性與 DynamicFlowAdapter 相同。
  • slots 接受一個(gè)數(shù)組，里面每一個(gè)元素都是與 connect 連接好的 component 或 adapter。
  1. CustomFlowAdapter

class CommentAdapter extends Adapter<PageState> {
    CommentAdapter()
        : super(
            adapter: buildCommentAdapter,
        );
}
 
ListAdapter buildCommentAdapter(PageState state, Dispatch dispatch, ViewService service) {
    final List builders = Collections.compact([
        _buildCommentHeader(state, dispatch, service),
    ]);
 
    if (state.commentList.length > 0) {
      builders.addAll(_buildCommentList(state, dispatch, service));
    } else {
      builders.addAll(_buildEmpty(state, dispatch, service));
    }
 
    return ListAdapter(
      (BuildContext buildContext, int index) => builders[index](buildContext, index),
      builders.length,
    );
  • 上面示例是一個(gè) CustomFlowAdapter，其 adapter 是一個(gè)方法 buildCommentAdapter，這個(gè)方法返回了一個(gè) ListAdapter。
  • buildCommentAdapter 里根據(jù)數(shù)據(jù)生成一個(gè)視圖列表。
  • 例如示例中如果 commentList.length > 0 就在 ListAdapter 中加入一個(gè) 評論列表，如果沒有評論就加入一個(gè)空視圖的 widget。
本例通過DynamicFlowAdapter進(jìn)行敘述，先看UI界面
Untitled4.gif

界面組成：ListView構(gòu)建界面，分為三部分，

  • 頭部
  • 中間單元格數(shù)組
  • 尾部
目錄結(jié)構(gòu)如下圖
目錄.png

1.main-page

  • 代碼示例
class AdapterTestPage extends Page<AdapterTestState, Map<String, dynamic>> {
  AdapterTestPage()
      : super(
          initState: initState,
          effect: buildEffect(),
          reducer: buildReducer(),
          view: buildView,
          dependencies: Dependencies<AdapterTestState>(
              adapter: NoneConn<AdapterTestState>() + ListGroupAdapter(),
              slots: <String, Dependent<AdapterTestState>>{}),
          middleware: <Middleware<AdapterTestState>>[],
        );
}
  • adapter和page建立關(guān)聯(lián)，主要通過dependencies下的adapter進(jìn)行關(guān)聯(lián)，fish_redux下的對應(yīng)api如下
  /// Use [adapter: NoneConn<T>() + Adapter<T>()] instead of [adapter: Adapter<T>()],
  /// Which is better reusability and consistency.
  Dependencies({
    this.slots,
    this.adapter,
  }) : assert(adapter == null || adapter.isAdapter(),
            'The dependent must contains adapter.');

2.view

  • view界面，主要通過viewService下的buildAdapter()，拿到page頁的adapter，然后創(chuàng)建對應(yīng)UI
  • 這里的viewService我們可以看下api信息
/// Seen in view-part or adapter-part
abstract class ViewService implements ExtraData {
  /// The way to build adapter which is configured in Dependencies.list
  ListAdapter buildAdapter();

  /// The way to build slot component which is configured in Dependencies.slots
  Widget buildComponent(String name);

  /// Get BuildContext from the host-widget
  BuildContext get context;

  /// Broadcast action(the intent) in app (inter-pages)
  void broadcast(Action action);

  /// Broadcast in all component receivers;
  void broadcastEffect(Action action, {bool excluded});
}
  • 對應(yīng)UI
  • 代碼示例
Widget buildView(
    AdapterTestState state, Dispatch dispatch, ViewService viewService) {
  final ListAdapter adapter = viewService.buildAdapter();
  return Scaffold(
    appBar: AppBar(
      title: Text('Adapter'),
    ),
    body: ListView.separated(
      itemBuilder: adapter.itemBuilder,
      itemCount: adapter.itemCount,
      separatorBuilder: (context, position) => Divider(
        height: 1,
      ),
    ),
  );
}

3.state基本數(shù)據(jù)處理

  • state主要負(fù)責(zé)數(shù)據(jù)初始化工作，因此不再贅述

4.adapter

  • 主要使用的是DynamicFlowAdapter，從上文可以看出，由兩部分組成，pool 和 connector
  • 代碼示例
class ListGroupAdapter extends DynamicFlowAdapter<AdapterTestState> {
  ListGroupAdapter()
      : super(pool: <String, Component<Object>>{
          'header': ListHeaderComponent(),
          'cell': ListCellComponent(),
          'footer': ListFooterComponent()
        }, connector: ListGroupConnector());
}

class ListGroupConnector extends ConnOp<AdapterTestState, List<ItemBean>> {
  @override
  List<ItemBean> get(AdapterTestState state) {
    List<ItemBean> items = [];
    if (state.cellModels.length == 0) {
      return items;
    }
    items.add(ItemBean('header', state.headerModel));
    for (var cellModel in state.cellModels) {
      items.add(ItemBean('cell', cellModel));
    }
    items.add(ItemBean('footer', state.footerStr));
    return items;
  }
}

  • pool：主要由三部分組成，頭部視圖，cell 單元格，尾部視圖，他們通過唯一標(biāo)識符('header','cell','footer')進(jìn)行關(guān)聯(lián)，代碼順序不分先后，對應(yīng)的三個(gè)子界面主要通過component組裝

  • connector: 連接器，數(shù)據(jù)源處理，通過ItemBean進(jìn)行數(shù)據(jù)源包裝，items數(shù)組的數(shù)據(jù)順序分先后，前邊的將會優(yōu)先展示

  • header代碼示例

    • component
     class ListHeaderComponent extends Component<AdapterHeaderModel> {
ListHeaderComponent()
    : super(
        view: buildView,
        dependencies: Dependencies<AdapterHeaderModel>(
            adapter: null, slots: <String, Dependent<AdapterHeaderModel>>{}),
      );
 }

  • view

    Widget buildView(
  AdapterHeaderModel state, Dispatch dispatch, ViewService viewService) {
return Column(
  children: <Widget>[
    Image.network(state.imageNamed),
    Text(
      state.title,
      style: TextStyle(color: Colors.black),
    ),
    Text(
      state.detailTitle,
      style: TextStyle(color: Colors.black45),
    ),
  ],
);
}

如果想查看全部代碼可下載demo查看

Demo地址
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容