Flutter 開發系列教程(3) 列表佈局

不好意思，這篇文章來的晚些，因為最近比較忙，所以寫的晚了。我發現頭條號的格式不好用，編輯好的格式也常沒有了格式。^^!

這篇介紹一下如何做一個手機上的列表，我們先來看一下效果圖。

列表效果

我們先打開上次建立的工程，然後在work目錄下新建一個adapter和一個component,如下圖所示：

新建

新建adapter

新建component

建立完成後效果如下：

建立完成後

我們接下來修改文件。

1、list_adapter目錄裡我們要修改adapter.dart文件，將獲取數據的內容填充完整。

@override
List<itembean> get(WorkState state) {
 if (state.workItemStateList?.isNotEmpty == true) {
 return state.workItemStateList
 .map<itembean>((WorkItemState data) => ItemBean('workItem', data)) 

 .toList(growable: true);
 } else {
 return <itembean>[];
 }
}
@override
void set(WorkState state, List<itembean> items) {
 if (items?.isNotEmpty == true) {
 state.workItemStateList = List<workitemstate>.from(
 items.map<workitemstate>((ItemBean bean) => bean.data).toList());
 } else {
 state.workItemStateList = <workitemstate>[];
 }
}
/<workitemstate>/<workitemstate>/<workitemstate>/<itembean>/<itembean>/<itembean>/<itembean>

2、work_component目錄下要重點把view.dart文件內容補充完成，把顯示樣式及數據內容補充上。

3、外層的work目錄下的page.dart文件裡修改一行代碼，把component和list串連起來。

class WorkPage extends Page<workstate>> {
 WorkPage()
 : super(
 initState: initState,
 effect: buildEffect(),
 reducer: buildReducer(),
 view: buildView,
 dependencies: Dependencies<workstate>(
 adapter: NoneConn<workstate>() + WorkListAdapter(),
 slots: <string>>{
 }),
 middleware: <middleware>>[
 ],);
}
/<middleware>/<string>/<workstate>/<workstate>/<workstate>

就是這一句： adapter: NoneConn<workstate>() + WorkListAdapter(),/<workstate>

4、外層的work目錄下的view.dart文件裡把界面代碼填充完整。

通過以上步驟就算完成了，當然還有細節要修改，比如數據，事件等，因為這裡編輯不太方便，所以省略了一些小細節。如果沒有做出來的話，可以參考我的代碼來完成。此學習代碼放在了github上：https://github.com/saperliu/flutter_study

希望這個小例子可以幫助大家學會基本的flutter開發。您的關注將是我原創的動力，多多支持！也歡迎大學跟我交流。新開了QQ群：118224041，有需要的可以加。