使用 flutter 的ListView實現滾動列表

時間 2019-11-16

標籤使用 flutter listview 實現滾動列表简体版

原文原文鏈接

現現在打開一個 App，好比頭條、微博，都會有長列表，隨着咱們不斷地滑動，視窗內的內容也會不斷地更新。今天就用 Flutter 實現一下這種效果。css

這裏的表現其實就至關於有一個固定長度的容器，而後超出的內容是不可見的，只有當你向上或向下滑動屏幕時，視窗外看不見的內容纔會出如今視窗中。若是在 web 開發時，是須要容器加上樣式html

overflow: auto;
複製代碼

要想用 Flutter 實現，其實也是很簡單的，由於 Flutter 爲咱們提供了 ListView 組件。git

ListView 主要有如下幾種使用方式github

ListView
ListView.builder
ListView.separated
ListView.custom

ListView

ListView 是最簡單直接的方式，簡單，那麼適用的場景也是簡單的。僅適用於內容較少的情形，由於它是一次性渲染全部的 items ，當 items 的數目較多時，很容易出現卡頓現象的，致使滑動不流暢。你能夠試試加大下面 items 的大小，而後對比一下體驗效果。web

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()

構造函數 builder 要求傳入兩個參數，itemCount 和 itemBuilder 。前者規定列表數目的多少，後者決定了每一個列表如何渲染。跟 ListView 不一樣的點在於，這是懶加載的，假若有 1000 個列表，初始渲染時並不會全部都渲染，而只會特定數量的 item ，這對於性能和用戶體驗來講，是很好的提高。你能夠對比用 ListView 和用 ListView.builder 渲染 1000 個列表時，體驗是否有差異。less

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，又多了一個參數 separatorBuilder ，用於控制列表各個元素的間隔如何渲染。好比，咱們須要列表的每一個 item 之間有一個分割線，就能夠跟下面那樣，加一個 Divider 組件。ide

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();
      },
    );
  }
}
複製代碼