Flutter學習-listview

 listview 有四種建構的方法

一、直接建構:

在ListView裡加入 children屬性，並在children裡一個一個放入你要於ListView中顯現的子元件，若你要放入的子元件內容不多，且子元件內容類型不同時使用。

如下:

ListView(

padding: EdgeInsets.all(8.0), children: <Widget>[ Container( height: 50.0, color: Colors.red, child: Center( child: Text('第一項'), ), ), Container( height: 50.0, color: Colors.blue, child: Center( child: Text('第二項'), ), ), )

二、利用ListView.builder

給予下列兩個屬性 itemCount，告知要放入ListView的子元素數量，並利用itemBuilder屬性，給與每一個子元素進行不同的設定，此適用於子元素的內容相似，且數量較多的情況下使用。

itemBuilder: (context, index) {}
裡面的index會由你1至你設定 itemCount的數量，透過迭代的方法，依序給值

另外可設定其它項目，如cacheExtent，可設定緩衝的範圍。

可設定itemExtent，可以設定每行資料的大小。

如下:

ListView.builder( itemCount: entries.length, itemBuilder: (context, index) { return ListTile( title: Text('Entry ${entries[index]}'), ); }), ); )

三、利用ListView.separated

這個方法建構的目的主要在資料與資料間增加分隔線，它多了一個separatorBuilder: (context, indext) {

return 分隔線內容 );

如下:

ListView.separated( itemCount: entries.length, itemBuilder: (context, index) { return ListTile( title: Text('Entry ${entries[index]}'), ); }, //分割線樣式 separatorBuilder: (context, indext) { return Divider( height: 1, ); }, ), );

四、系統自訂

參考網頁:

https://www.cnblogs.com/ishoulgodo/p/14993174.html flutter中 ListView的使用

https://juejin.cn/post/6971076180317470728 Flutter 中 ListView 的 4 种构建方式详解 | Flutter Widgets