Flutter基礎之ListView的

簡介

Flutter作為史上最強UI架構，擁有很多豐富的UI元件，為仿抖音項目的實戰，本文簡單介紹一下基礎元件使用最多的清單ListView的用法。

構造函數

常用屬性介紹

常用屬性如下表所示

屬性	類型	概述
scrollDirection	Axis	Axis.horizontal ：水準清單， Axis.vertical：垂直清單
padding	EdgeInsetsGeometry	内邊距
reverse	bool	元件反向排序
children	List	清單元素
shrinkWrap	bool	是否根據item高度來決定總高度

基本使用

1. ListView.builder

ListView.builder 一般用于item數量不确定的情況，或者網絡擷取資料的清單。通過自定義Item布局來實作清單的展示。

效果如下：

2.ListView.separated

ListView.separated對比ListView.builder來說，多了一個separatorBuilder屬性，可以在清單中的每個Item直接添加一個自定義分割線。由于代碼較多，這裡隻展示部分代碼。

效果如下：

3.ListView(children: [],) .這樣使用适合item數量固定的，後期不會增加的情況。這樣場景基本很少使用。

添加強定頭部

我們都知道在Android中，如果要給清單添加頭部不太容易實作，特别是早期的ListView，根本就不支援添加頭部，直到後期官方推出的RecyclewView才支援添加。但是對于FLutter來說，添加頭部元件元件非常容易。

效果如下：

我們在ListView的item建構地方，增加了一個if判斷，如果下标等于0時，傳回一個頭部元件，否則傳回item布局，這樣做看着沒有什麼問題，但是事實上會少了一個下标為0 的基礎元件選項，我們可以當下标為0時，增加一個Column元件來解決這個問題。

ListView.separated(
            itemBuilder: (BuildContext context, int index) {
              RouteBean bean = RouteData.getElements()[index];
               if(index == 0){
                 return  Column(
                   children: [
                     Center(child: Text("我是ListView頭部",style: 
                      TextStyle(fontWeight: FontWeight.bold,fontSize: 20),),),
                     SizedBox(width: double.infinity,child: itemWidget(bean))
                   ],
                 );
              }else{
                 return itemWidget(bean);
              };
            }           

Column()是豎直排列的元件，内部元件依次從上到下排列。類似線性布局。Center()元件child居中顯示，SizedBox（）用來固定尺寸的元件，更多基礎元件這裡就不詳細叙述了，同學可以自行檢視網頁。

易錯點

在開發中如果當需要在Column中使用ListView展示頁面時，會出現頁面無法顯示問題。這是因為ListView直接在Column中使用無法測量高度導緻，需要在ListView外面添加一個Expend元件解決這個問題。感興趣的讀者可以動手試試。

總結

ListView作為Flutter中使用頻率較高的基礎元件，讀者應該熟記常用屬性。通過源碼分析加深對ListView的了解，本文隻是介紹簡單用法。以便在後面的項目實戰中使用。

後續會使用Flutter開發仿一個抖音的項目。感興趣的同學可以點選關注哦！