現(xiàn)如今打開(kāi)一個(gè) App，比如頭條、微博，都會(huì)有長(zhǎng)列表，隨著我們不斷地滑動(dòng)，視窗內(nèi)的內(nèi)容也會(huì)不斷地更新。今天就用 Flutter 實(shí)現(xiàn)一下這種效果。

這里的表現(xiàn)其實(shí)就相當(dāng)于有一個(gè)固定長(zhǎng)度的容器，然后超出的內(nèi)容是不可見(jiàn)的，只有當(dāng)你向上或向下滑動(dòng)屏幕時(shí)，視窗外看不見(jiàn)的內(nèi)容才會(huì)出現(xiàn)在視窗中。如果在 web 開(kāi)發(fā)時(shí)，是需要容器加上樣式

overflow: auto;

要想用 Flutter 實(shí)現(xiàn)，其實(shí)也是很簡(jiǎn)單的，因?yàn)?Flutter 為我們提供了 ListView 組件。

ListView 主要有以下幾種使用方式

• ListView
• ListView.builder
• ListView.separated
• ListView.custom

ListView

ListView 是最簡(jiǎn)單直接的方式，簡(jiǎn)單，那么適用的場(chǎng)景也是簡(jiǎn)單的。僅適用于內(nèi)容較少的情形，因?yàn)樗且淮涡凿秩舅械?items ，當(dāng) items 的數(shù)目較多時(shí)，很容易出現(xiàn)卡頓現(xiàn)象的，導(dǎo)致滑動(dòng)不流暢。 你可以試試加大下面 items 的大小，然后對(duì)比一下體驗(yàn)效果。

class ListViewDemo extends StatelessWidget {
 final _items = List<Widget>.generate(10,
   (i) => Container(padding: EdgeInsets.all(16.0), child: Text("Item $i")));

 @override
 Widget build(BuildContext context) {
  return ListView(
   children: _items,
  );
 }
}

ListView.builder()

構(gòu)造函數(shù) builder 要求傳入兩個(gè)參數(shù)， itemCount 和 itemBuilder 。前者規(guī)定列表數(shù)目的多少，后者決定了每個(gè)列表如何渲染。跟 ListView 不同的點(diǎn)在于，這是懶加載的，假如有 1000 個(gè)列表，初始渲染時(shí)并不會(huì)所有都渲染，而只會(huì)特定數(shù)量的 item ，這對(duì)于性能和用戶體驗(yàn)來(lái)說(shuō)，是很好的提升。 你可以對(duì)比用 ListView 和用 ListView.builder 渲染 1000 個(gè)列表時(shí)，體驗(yàn)是否有差別。

class ListViewDemo extends StatelessWidget {
 final _items = List<String>.generate(1000, (i) => "Item $i");

 @override
 Widget build(BuildContext context) {
  return ListView.builder(
   itemCount: 1000,
   itemBuilder: (context, idx) {
    return Container(
     padding: EdgeInsets.all(16.0),
     child: Text(_items[idx]),
    );
   },
  );
 }
}

ListView.separated()

separated 相比較于 builder，又多了一個(gè)參數(shù) separatorBuilder ，用于控制列表各個(gè)元素的間隔如何渲染。比如，我們需要列表的每個(gè) item 之間有一個(gè)分割線，就可以跟下面那樣，加一個(gè) Divider 組件。

class ListViewDemo extends StatelessWidget {
 final _items = List<String>.generate(1000, (i) => "Item $i");

 @override
 Widget build(BuildContext context) {
  return ListView.separated(
   itemCount: 1000,
   itemBuilder: (context, idx) {
    return Container(
     padding: EdgeInsets.all(16.0),
     child: Text(_items[idx]),
    );
   },
   separatorBuilder: (context, idx) {
    return Divider();
   },
  );
 }
}

ListView.custom()

custom，就跟名字一樣，讓我們自定義。必須的參數(shù)就是 childrenDelegate , 然后傳入一個(gè) 實(shí)現(xiàn)了 SliverChildDelegate 的組件，如 SliverChildListDelegate 和 SliverChildBuilderDelegate 。

SliverChildListDelegate 接收跟 ListView 一樣的 children ，而 SliverChildBuilderDelegate 接收跟 ListView.builder 的 itemBuilder 一樣類型的函數(shù)。

正常來(lái)說(shuō)，前面三個(gè)已經(jīng)可以滿足我們的日常使用需求了，無(wú)需自定義。

總結(jié)，上面主要討論了 ListView 的幾個(gè)構(gòu)造函數(shù)及用法，討論如何實(shí)現(xiàn)常見(jiàn)的滾動(dòng)列表。

完成的代碼，可見(jiàn)list_view.dart 。

最后

筆者最近在學(xué)習(xí)flutter，會(huì)持續(xù)地記錄自己的學(xué)習(xí)過(guò)程，并放在 github 上。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論