Flutter學習之SliverList和SliverGird的使用詳解

更新時間：2023年02月14日 08:21:43 作者：程序那些事

Sliver的組件一般都用在CustomScrollView中，除了SliverAppBar之外，我們還可以為CustomScrollView添加List或者Grid來實現(xiàn)更加復雜的組合效果。本文就來聊聊SliverList和SliverGird的使用吧

簡介

在上一篇文章我們講解SliverAppBar的時候有提到過，Sliver的組件一般都用在CustomScrollView中。除了SliverAppBar之外，我們還可以為CustomScrollView添加List或者Grid來實現(xiàn)更加復雜的組合效果。

今天要向大家介紹的就是SliverList和SliverGird。

SliverList和SliverGird詳解

從名字就可以看出SliverList和SliverGird分別是List和Grid的一種，他們和List與Grid最大的區(qū)別在于，他們可以控制子widget在main axis和cross axis之間的間隔，并且可以通過Extent屬性來控制子widget的大小，非常的強大。

我們先來看下這兩個組件的定義和構造函數(shù)：

class SliverList extends SliverMultiBoxAdaptorWidget {
  /// Creates a sliver that places box children in a linear array.
  const SliverList({
    Key? key,
    required SliverChildDelegate delegate,
  }) : super(key: key, delegate: delegate);

SliverList繼承自SliverMultiBoxAdaptorWidget，它的構造函數(shù)比較簡單，需要傳入一個SliverChildDelegate的參數(shù)，這里的SliverChildDelegate使用的是delegate的方法來創(chuàng)建SliverList的子組件。

SliverChildDelegate是一個抽象類，它有兩個實現(xiàn)類，分別是SliverChildBuilderDelegate和SliverChildListDelegate。

其中SliverChildBuilderDelegate是用的builder模式來生成子widget，在上一篇文章中，我們構建SliverList就是使用的這個builder類。

SliverChildBuilderDelegate使用builder來生成子Widget，而SliverChildListDelegate需要傳入一個childList來完成構造，也就是說SliverChildListDelegate需要一個確切的childList，而不是用builder來構建。

要注意的是SliverList并不能指定子widget的extent大小，如果你想指定List中的子widget的extent大小的話，那么可以使用SliverFixedExtentList:

class SliverFixedExtentList extends SliverMultiBoxAdaptorWidget {
  const SliverFixedExtentList({
    Key? key,
    required SliverChildDelegate delegate,
    required this.itemExtent,
  }) : super(key: key, delegate: delegate);

可以看到SliverFixedExtentList和SliverList相比，多了一個itemExtent參數(shù)，用來控制子widget在main axis上的大小。

然后我們再來看一下SliverGird：

class SliverGrid extends SliverMultiBoxAdaptorWidget {
  /// Creates a sliver that places multiple box children in a two dimensional
  /// arrangement.
  const SliverGrid({
    Key? key,
    required SliverChildDelegate delegate,
    required this.gridDelegate,
  }) : super(key: key, delegate: delegate);

SliverGrid也是繼承自SliverMultiBoxAdaptorWidget，和SliverList一樣，它也有一個SliverChildDelegate的參數(shù)，另外它還多了一個gridDelegate的參數(shù)用來控制gird的布局。

這里的gridDelegate是一個SliverGridDelegate類型的參數(shù),用來控制children的size和position。

SliverGridDelegate也是一個抽象類，它有兩個實現(xiàn)類，分別是SliverGridDelegateWithMaxCrossAxisExtent和SliverGridDelegateWithFixedCrossAxisCount,這兩個實現(xiàn)類的區(qū)別就在于MaxCrossAxisExtent和FixedCrossAxisCount的區(qū)別。

怎么理解MaxCrossAxisExtent呢？比如說這個Grid是豎向的，然后Gird的寬度是500.0,如果MaxCrossAxisExtent=100，那么delegate將會創(chuàng)建5個column，每個column的寬度是100。

crossAxisCount則是直接指定cross axis的child個數(shù)有多少。

SliverList和SliverGird的使用

有了上面介紹的SliverList和SliverGird的構造函數(shù),接下來我們具體來看下如何在項目中使用SliverList和SliverGird。

默認情況下SliverList和SliverGird是需要和CustomScrollView一起使用的，所以我們先創(chuàng)建一個CustomScrollView，在它的slivers屬性中，放入一個SliverAppBar組件：

CustomScrollView(
      slivers: <Widget>[
        const SliverAppBar(
          pinned: true,
          snap: false,
          floating: false,
          expandedHeight: 200.0,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('SliverList and SliverGrid'),
          ),
        ),
      ],
    );

SliverAppBar只是一個AppBar，運行可以得到下面的界面：

我們還需要為它繼續(xù)添加其他的slivers組件。

首先給他添加一個SliverGrid：

SliverGrid(
          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 200.0,
            mainAxisSpacing: 20.0,
            crossAxisSpacing: 50.0,
            childAspectRatio: 4.0,
          ),
          delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.green[100 * (index % 9)],
                child: Text('grid item $index'),
              );
            },
            childCount: 20,
          ),
        ),

這里我們設置了gridDelegate屬性，并且自定義了SliverChildBuilderDelegate，用來生成20個Container。

運行得到的界面如下：

然后為其添加SliverList:

SliverList(
          delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              return Container(
                color: index.isOdd ? Colors.white : Colors.green,
                height: 50.0,
                child: Center(
                  child: ListTile(
                    title: Text(
                      '100' + index.toString(),
                      style: const TextStyle(fontWeight: FontWeight.w500),
                    ),
                    leading: Icon(
                      Icons.account_box,
                      color: Colors.green[100 * (index % 9)],
                    ),
                  ),
                ),
              );
            },
            childCount: 15,
          ),
        ),

因為SliverList只需要傳入一個delegate參數(shù)，這里我們生成了15個child組件。生成的界面如下：

因為SliverList不能控制List中子widget的extent，所以我們再添加一個SliverFixedExtentList看看效果：

SliverFixedExtentList(
          itemExtent: 100.0,
          delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              return Container(
                color: index.isOdd ? Colors.white : Colors.green,
                height: 50.0,
                child: Center(
                  child: ListTile(
                    title: Text(
                      '200' + index.toString(),
                      style: const TextStyle(fontWeight: FontWeight.w500),
                    ),
                    leading: Icon(
                      Icons.account_box,
                      color: Colors.green[100 * (index % 9)],
                    ),
                  ),
                ),
              );
            },
            childCount: 15,
          ),

SliverFixedExtentList和SliverList相比多了一個itemExtent屬性，這里我們將其設置為100，運行可以得到下面的界面：