快捷導(dǎo)航

Flutter學(xué)習(xí)之SliverList和SliverGird的使用詳解

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

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

簡(jiǎn)介

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

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

SliverList和SliverGird詳解

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

我們先來(lái)看下這兩個(gè)組件的定義和構(gòu)造函數(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，它的構(gòu)造函數(shù)比較簡(jiǎn)單，需要傳入一個(gè)SliverChildDelegate的參數(shù)，這里的SliverChildDelegate使用的是delegate的方法來(lái)創(chuàng)建SliverList的子組件。

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

其中SliverChildBuilderDelegate是用的builder模式來(lái)生成子widget，在上一篇文章中，我們構(gòu)建SliverList就是使用的這個(gè)builder類。

SliverChildBuilderDelegate使用builder來(lái)生成子Widget，而SliverChildListDelegate需要傳入一個(gè)childList來(lái)完成構(gòu)造，也就是說(shuō)SliverChildListDelegate需要一個(gè)確切的childList，而不是用builder來(lái)構(gòu)建。

要注意的是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相比，多了一個(gè)itemExtent參數(shù)，用來(lái)控制子widget在main axis上的大小。

然后我們?cè)賮?lái)看一下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一樣，它也有一個(gè)SliverChildDelegate的參數(shù)，另外它還多了一個(gè)gridDelegate的參數(shù)用來(lái)控制gird的布局。

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

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

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

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

SliverList和SliverGird的使用

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

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

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

SliverAppBar只是一個(gè)AppBar，運(yùn)行可以得到下面的界面：

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

首先給他添加一個(gè)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,
          ),
        ),

這里我們?cè)O(shè)置了gridDelegate屬性，并且自定義了SliverChildBuilderDelegate，用來(lái)生成20個(gè)Container。

運(yùn)行得到的界面如下：

然后為其添加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,
          ),
        ),

因?yàn)镾liverList只需要傳入一個(gè)delegate參數(shù)，這里我們生成了15個(gè)child組件。生成的界面如下：

因?yàn)镾liverList不能控制List中子widget的extent，所以我們?cè)偬砑右粋€(gè)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相比多了一個(gè)itemExtent屬性，這里我們將其設(shè)置為100，運(yùn)行可以得到下面的界面：