官方文檔介紹
adapter為fish_redux團(tuán)隊(duì)對(duì)listView的優(yōu)化封裝商源，適用于長(zhǎng)列表渲染，其中實(shí)現(xiàn)方式有以下三種
- DynamicFlowAdapter 接受數(shù)組類型的數(shù)據(jù)驅(qū)動(dòng)
- StaticFlowAdapter 接受map類型的數(shù)據(jù)驅(qū)動(dòng)
- CustomAdapter 自定義 adapter
- 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)部通過(guò)唯一標(biāo)識(shí)符進(jìn)行標(biāo)記，注意一點(diǎn)是connector中的唯一標(biāo)識(shí)符出爹，他們需要一樣
- adapter-connector 數(shù)據(jù)源操作庄吼，可以看到ListGroupConnector為數(shù)據(jù)源處理，唯一標(biāo)識(shí)符必須和adapter-pool中的一致严就，數(shù)據(jù)源封裝是通過(guò)fish_redux開(kāi)出的ItemBean
- StaticFlowAdapter
class SomeStaticAdapter extends StaticFlowAdapter<PageState> {
SomeStaticAdapter()
: super(
slots: [
SomeComponent().asDependent(SomeComponenConnectt()),
TaskAdapter().asDependent(TaskAdapterConnect()),
],
);
- StaticFlowAdapter接收 map 類型的數(shù)據(jù)
- StaticFlowAdapter 沒(méi)有 pool 屬性总寻，但是有 slots，其他的屬性與 DynamicFlowAdapter 相同梢为。
- slots 接受一個(gè)數(shù)組渐行，里面每一個(gè)元素都是與 connect 連接好的 component 或 adapter。
- 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è) 評(píng)論列表旁理，如果沒(méi)有評(píng)論就加入一個(gè)空視圖的 widget。
本例通過(guò)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)，主要通過(guò)dependencies下的adapter進(jìn)行關(guān)聯(lián)芋哭，fish_redux下的對(duì)應(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界面沉衣，主要通過(guò)viewService下的buildAdapter()，拿到page頁(yè)的adapter减牺，然后創(chuàng)建對(duì)應(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});
}
- 對(duì)應(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 單元格栋艳，尾部視圖，他們通過(guò)唯一標(biāo)識(shí)符('header','cell','footer')進(jìn)行關(guān)聯(lián)句各，代碼順序不分先后吸占，對(duì)應(yīng)的三個(gè)子界面主要通過(guò)component組裝
connector: 連接器，數(shù)據(jù)源處理凿宾，通過(guò)ItemBean進(jìn)行數(shù)據(jù)源包裝矾屯，items數(shù)組的數(shù)據(jù)順序分先后，前邊的將會(huì)優(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查看
