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ù)，前面已經(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)樗椒较?，則itemExtent就代表子組件的寬度。在ListView中，指定itemExtent比讓子組件自己決定自身長度會(huì)更高效，這是因?yàn)橹付╥temExtent后，滾動(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ī)律。我們?cè)诤竺嬖诮榻B可滾動(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)行效果如圖所示：

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;
? ? ? ? },
? ? );
? }
}

運(yùn)行效果如圖：

實(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) {
? ? ? _words.insertAll(_words.length - 1,
? ? ? ? ? //每次生成20個(gè)單詞
? ? ? ? ? generateWordPairs().take(20).map((e) => e.asPascalCase).toList()
? ? ? );
? ? ? setState(() {
? ? ? ? //重新構(gòu)建列表
? ? ? });
? ? });
? }

}

運(yùn)行后效果如圖所示：

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

添加固定列表頭

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

我們按照之前經(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)長istView高度邊界無法確定引起，所以解決的辦法也很明顯，我們需要給ListView指定邊界，我們通過SizedBox指定一個(gè)列表高度看看是否生效：

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

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

可以看到，現(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)行效果如下圖所示：

可以看到，我們期望的效果實(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ù)對(duì)應(yīng)了不同的列表項(xiàng)生成模型，如果需要自定義列表項(xiàng)生成模型，可以通過ListView.custom來自定義，它需要實(shí)現(xiàn)一個(gè)SliverChildDelegate用來給ListView生成列表項(xiàng)組件，更多詳情請(qǐng)參考API文檔。

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

最新評(píng)論