Flutter實(shí)戰(zhàn) ListView

ListView是最常用的可滾動(dòng)組件之一，它可以沿一個(gè)方向線性排布所有子組件，并且它也支持基于 Sliver 的延遲構(gòu)建模型。我們看看 ListView 的默認(rèn)構(gòu)造函數(shù)定義：

ListView({
  ...  
  //可滾動(dòng)widget公共參數(shù)
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController controller,
  bool primary,
  ScrollPhysics physics,
  EdgeInsetsGeometry padding,

  
  //ListView各個(gè)構(gòu)造函數(shù)的共同參數(shù)  
  double itemExtent,
  bool shrinkWrap = false,
  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
  double cacheExtent,

    
  //子widget列表
  List<Widget> children = const <Widget>[],
})

上面參數(shù)分為兩組：第一組是可滾動(dòng)組件的公共參數(shù)，本章第一節(jié)中已經(jīng)介紹過，不再贅述；第二組是ListView各個(gè)構(gòu)造函數(shù)（ListView有多個(gè)構(gòu)造函數(shù)）的共同參數(shù)，我們重點(diǎn)來看看這些參數(shù)，：

• itemExtent：該參數(shù)如果不為null，則會(huì)強(qiáng)制children的“長度”為itemExtent的值；這里的“長度”是指滾動(dòng)方向上子組件的長度，也就是說如果滾動(dòng)方向是垂直方向，則itemExtent代表子組件的高度；如果滾動(dòng)方向?yàn)樗椒较颍瑒titemExtent就代表子組件的寬度。在ListView中，指定itemExtent比讓子組件自己決定自身長度會(huì)更高效，這是因?yàn)橹付?code>itemExtent后，滾動(dòng)系統(tǒng)可以提前知道列表的長度，而無需每次構(gòu)建子組件時(shí)都去再計(jì)算一下，尤其是在滾動(dòng)位置頻繁變化時(shí)（滾動(dòng)系統(tǒng)需要頻繁去計(jì)算列表高度）。
• shrinkWrap：該屬性表示是否根據(jù)子組件的總長度來設(shè)置ListView的長度，默認(rèn)值為false 。默認(rèn)情況下，ListView的會(huì)在滾動(dòng)方向盡可能多的占用空間。當(dāng)ListView在一個(gè)無邊界(滾動(dòng)方向上)的容器中時(shí)，shrinkWrap必須為true。
• addAutomaticKeepAlives：該屬性表示是否將列表項(xiàng)（子組件）包裹在AutomaticKeepAlive 組件中；典型地，在一個(gè)懶加載列表中，如果將列表項(xiàng)包裹在AutomaticKeepAlive中，在該列表項(xiàng)滑出視口時(shí)它也不會(huì)被GC（垃圾回收），它會(huì)使用KeepAliveNotification來保存其狀態(tài)。如果列表項(xiàng)自己維護(hù)其KeepAlive狀態(tài)，那么此參數(shù)必須置為false。
• addRepaintBoundaries：該屬性表示是否將列表項(xiàng)（子組件）包裹在RepaintBoundary組件中。當(dāng)可滾動(dòng)組件滾動(dòng)時(shí)，將列表項(xiàng)包裹在RepaintBoundary中可以避免列表項(xiàng)重繪，但是當(dāng)列表項(xiàng)重繪的開銷非常?。ㄈ缫粋€(gè)顏色塊，或者一個(gè)較短的文本）時(shí)，不添加RepaintBoundary反而會(huì)更高效。和addAutomaticKeepAlive一樣，如果列表項(xiàng)自己維護(hù)其KeepAlive狀態(tài)，那么此參數(shù)必須置為false。

注意：上面這些參數(shù)并非ListView特有，在本章后面介紹的其它可滾動(dòng)組件也可能會(huì)擁有這些參數(shù)，它們的含義是相同的。

#默認(rèn)構(gòu)造函數(shù)

默認(rèn)構(gòu)造函數(shù)有一個(gè)children參數(shù)，它接受一個(gè) Widget 列表（List）。這種方式適合只有少量的子組件的情況，因?yàn)檫@種方式需要將所有children都提前創(chuàng)建好（這需要做大量工作），而不是等到子 widget 真正顯示的時(shí)候再創(chuàng)建，也就是說通過默認(rèn)構(gòu)造函數(shù)構(gòu)建的 ListView 沒有應(yīng)用基于 Sliver 的懶加載模型。實(shí)際上通過此方式創(chuàng)建的ListView和使用SingleChildScrollView+Column的方式?jīng)]有本質(zhì)的區(qū)別。下面是一個(gè)例子：

ListView(
  shrinkWrap: true, 
  padding: const EdgeInsets.all(20.0),
  children: <Widget>[
    const Text('I\'m dedicating every day to you'),
    const Text('Domestic life was never quite my style'),
    const Text('When you smile, you knock me out, I fall apart'),
    const Text('And I thought I was so smart'),
  ],
);

再次強(qiáng)調(diào)，可滾動(dòng)組件通過一個(gè) List 來作為其 children 屬性時(shí)，只適用于子組件較少的情況，這是一個(gè)通用規(guī)律，并非ListView自己的特性，像GridView也是如此。

#ListView.builder

ListView.builder適合列表項(xiàng)比較多（或者無限）的情況，因?yàn)橹挥挟?dāng)子組件真正顯示的時(shí)候才會(huì)被創(chuàng)建，也就說通過該構(gòu)造函數(shù)創(chuàng)建的ListView是支持基于 Sliver 的懶加載模型的。下面看一下ListView.builder的核心參數(shù)列表：

ListView.builder({
  // ListView公共參數(shù)已省略  
  ...
  @required IndexedWidgetBuilder itemBuilder,
  int itemCount,
  ...
})

• itemBuilder：它是列表項(xiàng)的構(gòu)建器，類型為IndexedWidgetBuilder，返回值為一個(gè) widget。當(dāng)列表滾動(dòng)到具體的index位置時(shí)，會(huì)調(diào)用該構(gòu)建器構(gòu)建列表項(xiàng)。
• itemCount：列表項(xiàng)的數(shù)量，如果為null，則為無限列表。

可滾動(dòng)組件的構(gòu)造函數(shù)如果需要一個(gè)列表項(xiàng) Builder，那么通過該構(gòu)造函數(shù)構(gòu)建的可滾動(dòng)組件通常就是支持基于 Sliver 的懶加載模型的，反之則不支持，這是個(gè)一般規(guī)律。我們在后面在介紹可滾動(dòng)組件的構(gòu)造函數(shù)時(shí)將不再專門說明其是否支持基于 Sliver 的懶加載模型了。

下面看一個(gè)例子：

ListView.builder(
    itemCount: 100,
    itemExtent: 50.0, //強(qiáng)制高度為50.0
    itemBuilder: (BuildContext context, int index) {
      return ListTile(title: Text("$index"));
    }
);

運(yùn)行效果如圖6-2所示：

#ListView.separated

ListView.separated可以在生成的列表項(xiàng)之間添加一個(gè)分割組件，它比ListView.builder多了一個(gè)separatorBuilder參數(shù)，該參數(shù)是一個(gè)分割組件生成器。

下面我們看一個(gè)例子：奇數(shù)行添加一條藍(lán)色下劃線，偶數(shù)行添加一條綠色下劃線。

class ListView3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //下劃線widget預(yù)定義以供復(fù)用。  
    Widget divider1=Divider(color: Colors.blue,);
    Widget divider2=Divider(color: Colors.green);
    return ListView.separated(
        itemCount: 100,
        //列表項(xiàng)構(gòu)造器
        itemBuilder: (BuildContext context, int index) {
          return ListTile(title: Text("$index"));
        },
        //分割器構(gòu)造器
        separatorBuilder: (BuildContext context, int index) {
          return index%2==0?divider1:divider2;
        },
    );
  }
}

#實(shí)例：無限加載列表

假設(shè)我們要從數(shù)據(jù)源異步分批拉取一些數(shù)據(jù)，然后用ListView展示，當(dāng)我們滑動(dòng)到列表末尾時(shí)，判斷是否需要再去拉取數(shù)據(jù)，如果是，則去拉取，拉取過程中在表尾顯示一個(gè) loading，拉取成功后將數(shù)據(jù)插入列表；如果不需要再去拉取，則在表尾提示"沒有更多"。代碼如下：

class InfiniteListView extends StatefulWidget {
  @override
  _InfiniteListViewState createState() => new _InfiniteListViewState();
}


class _InfiniteListViewState extends State<InfiniteListView> {
  static const loadingTag = "##loading##"; //表尾標(biāo)記
  var _words = <String>[loadingTag];


  @override
  void initState() {
    super.initState();
    _retrieveData();
  }


  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: _words.length,
      itemBuilder: (context, index) {
        //如果到了表尾
        if (_words[index] == loadingTag) {
          //不足100條，繼續(xù)獲取數(shù)據(jù)
          if (_words.length - 1 < 100) {
            //獲取數(shù)據(jù)
            _retrieveData();
            //加載時(shí)顯示loading
            return Container(
              padding: const EdgeInsets.all(16.0),
              alignment: Alignment.center,
              child: SizedBox(
                  width: 24.0,
                  height: 24.0,
                  child: CircularProgressIndicator(strokeWidth: 2.0)
              ),
            );
          } else {
            //已經(jīng)加載了100條數(shù)據(jù)，不再獲取數(shù)據(jù)。
            return Container(
                alignment: Alignment.center,
                padding: EdgeInsets.all(16.0),
                child: Text("沒有更多了", style: TextStyle(color: Colors.grey),)
            );
          }
        }
        //顯示單詞列表項(xiàng)
        return ListTile(title: Text(_words[index]));
      },
      separatorBuilder: (context, index) => Divider(height: .0),
    );
  }


  void _retrieveData() {
    Future.delayed(Duration(seconds: 2)).then((e) {
      setState(() {
        //重新構(gòu)建列表
        _words.insertAll(_words.length - 1,
          //每次生成20個(gè)單詞
          generateWordPairs().take(20).map((e) => e.asPascalCase).toList()
        );
      });
    });
  }


}

運(yùn)行后效果如圖6-4、6-5所示：

代碼比較簡單，讀者可以參照代碼中的注釋理解，故不再贅述。需要說明的是，_retrieveData()的功能是模擬從數(shù)據(jù)源異步獲取數(shù)據(jù)，我們使用 english_words 包的generateWordPairs()方法每次生成20個(gè)單詞。

#添加固定列表頭

很多時(shí)候我們需要給列表添加一個(gè)固定表頭，比如我們想實(shí)現(xiàn)一個(gè)商品列表，需要在列表頂部添加一個(gè)“商品列表”標(biāo)題，期望的效果如圖6-6所示：

我們按照之前經(jīng)驗(yàn)，寫出如下代碼：

@override
Widget build(BuildContext context) {
  return Column(children: <Widget>[
    ListTile(title:Text("商品列表")),
    ListView.builder(itemBuilder: (BuildContext context, int index) {
        return ListTile(title: Text("$index"));
    }),
  ]);
}

然后運(yùn)行，發(fā)現(xiàn)并沒有出現(xiàn)我們期望的效果，相反觸發(fā)了一個(gè)異常；

Error caught by rendering library, thrown during performResize()。
Vertical viewport was given unbounded height ...

從異常信息中我們可以看到是因?yàn)?code>ListView高度邊界無法確定引起，所以解決的辦法也很明顯，我們需要給ListView指定邊界，我們通過SizedBox指定一個(gè)列表高度看看是否生效：

... //省略無關(guān)代碼
SizedBox(
    height: 400, //指定列表高度為400
    child: ListView.builder(itemBuilder: (BuildContext context, int index) {
        return ListTile(title: Text("$index"));
    }),
),
...

運(yùn)行效果如圖6-7所示：

可以看到，現(xiàn)在沒有觸發(fā)異常并且列表已經(jīng)顯示出來了，但是我們的手機(jī)屏幕高度要大于400，所以底部會(huì)有一些空白。那如果我們要實(shí)現(xiàn)列表鋪滿除表頭以外的屏幕空間應(yīng)該怎么做？直觀的方法是我們?nèi)?dòng)態(tài)計(jì)算，用屏幕高度減去狀態(tài)欄、導(dǎo)航欄、表頭的高度即為剩余屏幕高度，代碼如下：

... //省略無關(guān)代碼
SizedBox(
  //Material設(shè)計(jì)規(guī)范中狀態(tài)欄、導(dǎo)航欄、ListTile高度分別為24、56、56 
  height: MediaQuery.of(context).size.height-24-56-56,
  child: ListView.builder(itemBuilder: (BuildContext context, int index) {
    return ListTile(title: Text("$index"));
  }),
)
...    

運(yùn)行效果如下圖6-8所示：

可以看到，我們期望的效果實(shí)現(xiàn)了，但是這種方法并不優(yōu)雅，如果頁面布局發(fā)生變化，比如表頭布局調(diào)整導(dǎo)致表頭高度改變，那么剩余空間的高度就得重新計(jì)算。那么有什么方法可以自動(dòng)拉伸ListView以填充屏幕剩余空間的方法嗎？當(dāng)然有！答案就是Flex。前面已經(jīng)介紹過在彈性布局中，可以使用Expanded自動(dòng)拉伸組件大小，并且我們也說過Column是繼承自Flex的，所以我們可以直接使用Column+Expanded來實(shí)現(xiàn)，代碼如下：

@override
Widget build(BuildContext context) {
  return Column(children: <Widget>[
    ListTile(title:Text("商品列表")),
    Expanded(
      child: ListView.builder(itemBuilder: (BuildContext context, int index) {
        return ListTile(title: Text("$index"));
      }),
    ),
  ]);
}

運(yùn)行后，和上圖一樣，完美實(shí)現(xiàn)了！

#總結(jié)

本節(jié)主要介紹了ListView的一些公共參數(shù)以及常用的構(gòu)造函數(shù)。不同的構(gòu)造函數(shù)對應(yīng)了不同的列表項(xiàng)生成模型，如果需要自定義列表項(xiàng)生成模型，可以通過ListView.custom來自定義，它需要實(shí)現(xiàn)一個(gè)SliverChildDelegate用來給 ListView 生成列表項(xiàng)組件，更多詳情請參考 API 文檔。