【Flutter 2-11】Flutter手把手教程UI佈局和Widget——列表ListView

做者 | 弗拉德
來源 | 弗拉德（公衆號：fulade_me)

ListView

ListView是在移動端很是常見的控件，在大多數的展現場景中都離不開ListView。在Flutter中對ListView的封裝也很是好，簡單幾行代碼就能夠知足咱們佈局一個滾動列表的需求。

先來看一下構造函數：

ListView({
    /// key
    Key key,
    /// 佈局方向
    Axis scrollDirection = Axis.vertical,
    /// 是否 倒序顯示
    bool reverse = false,
    /// ScrollController用於控制滾動位置和監聽滾動事件
    ScrollController controller,
    /// 是否使用默認的controller
    bool primary,
    /// 滾動效果  能夠經過此參數 設置 ListView 不可滾動
    ScrollPhysics physics,
    /// 是否根據子控件的總長度來設置ListView的長度，默認值爲false
    bool shrinkWrap = false,
    ///  padding
    EdgeInsetsGeometry padding,
    /// 子控件高度
    this.itemExtent,
    // 在 關閉屏幕時 是否釋放子控件
    bool addAutomaticKeepAlives = true,
    /// 是否 避免列表項重繪
    bool addRepaintBoundaries = true,
    /// 該屬性表示是否把子控件包裝在IndexedSemantics裏，用來提供無障礙語義
    bool addSemanticIndexes = true,
    // 預加載子控件的個數
    double cacheExtent,
    /// 子控件數組
    List<Widget> children = const <Widget>[],
    /// 子控件的個數
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
})

builder

Flutter給咱們提供了四種構造ListView的方法，有ListView()、ListView.builder()、ListView.separated()、ListView.custom()、

構造函數	描述
ListView()	靜態構造方法 初始化以前須要肯定數據源的大小
ListView.builder()	動態構造方法 可動態傳入數據
ListView.separated()	動態構造方法 可動態傳入數據 可動態定製分割線的樣式
ListView.custom()	動態構造方法 須要傳入SliverChildDelegate來作動態生成

靜態構造方法和動態構造方法
ListView()是初始化的時候須要肯定數據源的大小，一旦初始化成功後不能再次動態的插入數據。
ListView.builder()、ListView.separated()、ListView.custom()能夠動態的插入數據，且可以更小的節省內存空間。
咱們來看如下代碼：

Flexible(
    child: ListView(
        children: List.generate(
            10,
            (index) {
                print("without builder index = $index");
                return Container(
                height: 60,
                child: Card(
                        color: Colors.blue,
                        child: Center(child: Text("$index")),
                    ),
                );
            },
        ),
    ),
),
Flexible(
    child: ListView.builder(
        itemCount: 10,
        itemExtent: 60,
        itemBuilder: (BuildContext contenxt, int index) {
            print("builder index = $index");
            return Container(
                height: 60,
                child: Card(
                color: Colors.red,
                child: Center(child: Text("$index")),
                ),
            );
        },
    ),
),

一樣是須要初始化10個子控件，咱們分別在List.generate方法和itemBuilder方法中作了打印操做
輸出以下：

flutter: without builder index = 0
flutter: without builder index = 1
flutter: without builder index = 2
flutter: without builder index = 3
flutter: without builder index = 4
flutter: without builder index = 5
flutter: without builder index = 6
flutter: without builder index = 7
flutter: without builder index = 8
flutter: without builder index = 9
flutter: builder index = 0
flutter: builder index = 1
flutter: builder index = 2
flutter: builder index = 3
flutter: builder index = 4
flutter: builder index = 5
flutter: builder index = 6
flutter: builder index = 7

由輸出的log可見，builder方法只初始化了7個子控件，ListView()方法完整的初始化了10個子控件。
builder方法是在須要使用的時候纔會初始化，當頁面滾動到第9個子控件的時候，這個時候纔會初始化第9個子控件。
這樣作的優點是：當咱們的列表數據量很大的時候(好比說有成百上千個數據)，咱們只初始化幾個來知足頁面的顯示需求，其餘的控件在須要的時候，再作初始化這樣就大大的幫助咱們節省內存空間。

scrollDirection

ListView同時具有了水平佈局和垂直佈局的能力，咱們只須要給scrollDirection設置不一樣的參數便可。
scrollDirection接收的參數值有兩個Axis.vertical和Axis.horizontal

Axis.vertical
效果以下

Axis.horizontal
效果以下

reverse

參數reverse能夠控制列表是按正序顯示仍是倒序顯示。

reverse = true
表示倒序顯示

reverse = false
表示正序顯示

physics

某些狀況下咱們並不想要ListView能夠滾動，只要把physics設置爲NeverScrollableScrollPhysics便可。
physics還有其餘兩個比較重要的值：
ClampingScrollPhysics：在Android設備上有微光效果。
BouncingScrollPhysics：在iOS設備上有彈性效果。

separated

在ListView.separated()構造函數中，咱們能夠傳入一個自定義的Divider來做做爲分隔的樣式
這裏咱們來看一下Divider都有哪些參數：

const Divider({
    /// key
    Key key,
    // 高度
    this.height,
    /// 顏色的 高度
    this.thickness,
    /// 開頭處的縮進
    this.indent,
    /// 結束處的縮進 
    this.endIndent,
    /// 顏色
    this.color,
})

height = 0

height = 10

thinkness = 10

indent = 100

end = 100

想體驗以上示例的運行效果，能夠到個人Github倉庫項目flutter_app->lib->routes->listview_page.dart查看，而且能夠下載下來運行並體驗。

---