Flutter：Slivers大家族，讓滑動檢視的組合變得很簡單！

吉原拉麵發表於2018-10-23
Flutter

文中所有示例程式碼請點選：gitee.com/yumi0629/Fl…

  今天呢，我小拉麵主要想給大家講一講Flutter中的Slivers大家族的使用場景和方法。開發過列表佈局的同學們應該對Slivers系列的控制元件不陌生，或多或少都用過這個庫中的控制元件，來解決複雜的滑動巢狀佈局。
  比如之前講Hero的時候提到的下面這個介面，使用普通的GridView的話是沒法實現的，我們選擇使用CustomScrollView，然後在slivers屬性中新增子控制元件，在這個例子裡，我們可以用SliverToBoxAdapter來做HeaderView，GridView來做主體佈局，整體為一個CustomScrollView，完全不會出現任何滑動衝突的問題。

Flutter：Slivers大家族，讓滑動檢視的組合變得很簡單！
  Flutter中的Slivers大家族基本都是配合CustomScrollView來實現的，除了上面提到的滑動佈局巢狀，你還可以使用Slivers來實現頁面頭部展開/收起、 AppBar隨手勢變換等等功能。官方的Sliver庫裡面的控制元件很多，可以去Flutter API網站搜一下，這篇文章我只講一些常用的控制元件。   OK, Let's start !!

SliverAppBar

  如果你是一名Android開發者，一定使用過CollapsingToolbarLayout這個佈局來實現AppBar展開/收起的功能，在Flutter裡面則對應SliverAppBar控制元件。給SliverAppBar設定flexibleSpace和expandedHeight屬性，就可以輕鬆完成AppBar展開/收起的功能：

CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            actions: <Widget>[
              _buildAction(),
            ],
            title: Text('SliverAppBar'),
            backgroundColor: Theme.of(context).accentColor,
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.asset('images/food01.jpeg', fit: BoxFit.cover),
            ),
            // floating: floating,
            // snap: snap,
            // pinned: pinned,
          ),
          SliverFixedExtentList(
            itemExtent: 120.0,
            delegate: SliverChildListDelegate(
              products.map((product) {
                return _buildItem(product);
              }).toList(),
            ),
          ),
        ],
      );
複製程式碼

sliver_app_bar_01.gif
  如果設定floating屬性為true，那麼AppBar會在你做出下拉手勢時就立即展開（即使ListView並沒有到達頂部），該展開狀態不顯示flexibleSpace：
sliver_app_bar_02.gif
  如果同時設定floating和snap屬性為true，那麼AppBar會在你做出下拉手勢時就立即全部展開（即使ListView並沒有到達頂部），該展開狀態顯示flexibleSpace：
sliver_app_bar_03.gif

  如果不想AppBar消失，則設定pinned屬性為true即可：

sliver_app_bar_04.gif

SliverList

  SliverList的使用非常簡單，只需設定delegate屬性即可，我們一般使用SliverChildBuilderDelegate，注意記得設定childCount，否則Flutter沒法知道怎麼繪製：

CustomScrollView(
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return _buildItem(context, products[index]);
              },
              childCount: 3,
            ),
          )
        ],
      );
複製程式碼

sliver_list.png

  你也可以通過下面的方式來設定childCount，如果不設定childCount，Flutter一旦發現delegate的某個index返回了null，就會認為childCount就是這個index。

delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    if(index>products.length){
                      return null;
                    }
                return _buildItem(context, products[index]);
              },
複製程式碼

  你也可以使用SliverChildListDelegate來構建delegate：

delegate: SliverChildListDelegate([
              _buildItem(),
              _buildItem(),
              _buildItem(),
            ]),
複製程式碼

SliverChildListDelegate和SliverChildBuilderDelegate的區別：

  • SliverChildListDelegate一般用來構item建數量明確的列表，會提前build好所有的子item，所以在效率上會有問題，適合item數量不多的情況（不超過一屏）。
  • SliverChildBuilderDelegate構建的列表理論上是可以無限長的，因為使用來lazily construct優化。 （兩者的區別有些類似於ListView和ListView.builder()的區別。）

SliverGrid

  SliverGrid有三個建構函式：SliverGrid.count()、SliverGrid.extent和SliverGrid()。

  • SliverGrid.count()指定了一行展示多少個item，下面的例子表示一行展示4個：
SliverGrid.count(children: scrollItems, crossAxisCount: 4)
複製程式碼
  • SliverGrid.extent可以指定item的最大寬度，然後讓Flutter自己決定一行展示多少個item：
SliverGrid.extent(children: scrollItems, maxCrossAxisExtent: 90.0)
複製程式碼
  • SliverGrid()則是需要指定一個gridDelegate，它提供給了程式設計師一個自定義Delegate的入口，你可以自己決定每一個item怎麼排列：
SliverGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: products.length,
  ),
  delegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return _buildItem(products[index]);;
    }
);
複製程式碼

sliver_grid.png

SliverPersistentHeader

  SliverPersistentHeader顧名思義，就是給一個可滑動的檢視新增一個頭（實際上，在CustomScrollView的slivers列表中，header可以出現在檢視的任意位置，不一定要是在頂部）。這個Header會隨著滑動而展開/收起，使用pinned和floating屬性來控制收起時Header是否展示（pinned和floating屬性不可以同時為true）,pinned和floating屬性的具體意義和SliverAppBar中相同，這裡就不再次解釋了。

sliver_persistent_header.gif

SliverPersistentHeader(
      pinned: pinned,
      floating: floating,
      delegate: _SliverAppBarDelegate(
        minHeight: 60.0,
        maxHeight: 180.0,
        child: Container(),
      ),
    );
複製程式碼

  構建一個SliverPersistentHeader需要傳入一個delegate，這個delegate是SliverPersistentHeaderDelegate型別的，而SliverPersistentHeaderDelegate是一個abstract類，我們不能直接new一個SliverPersistentHeaderDelegate出來，因此，我們需要自定義一個delegate來實現SliverPersistentHeaderDelegate類：

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate({
    @required this.minHeight,
    @required this.maxHeight,
    @required this.child,
  });

  final double minHeight;
  final double maxHeight;
  final Widget child;

  @override
  double get minExtent => minHeight;

  @override
  double get maxExtent => math.max(maxHeight, minHeight);

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new SizedBox.expand(child: child);
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}
複製程式碼

  寫一個自定義SliverPersistentHeaderDelegate很簡單，只需重寫build()、get maxExtent、get minExtent和shouldRebuild()這四個方法，上面就是一個最簡單的SliverPersistentHeaderDelegate的實現。其中，maxExtent表示header完全展開時的高度，minExtent表示header在收起時的最小高度。因此，對於我們上面的那個自定義Delegate，如果將minHeight和maxHeight的值設定為相同時，header就不會收縮了，這樣的Header跟我們平常理解的Header更像。
  之前也提到了，實際使用時，header不一定要放在slivers列表的最前面，可以隨意混搭，當然，一般來說不會有這種視覺需求的：

CustomScrollView(
        slivers: <Widget>[
          _buildHeader(0),
          SliverGrid.count(
            crossAxisCount: 3,
            children: _products.map((product) {
              return _buildItemGrid(product);
            }).toList(),
          ),
          _buildHeader(1),
          SliverFixedExtentList(
            itemExtent: 100.0,
            delegate: SliverChildListDelegate(
              products.map((product) {
                return _buildItemList(product);
              }).toList(),
            ),
          ),
          _buildHeader(2),
          SliverGrid(
            gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200.0,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 3.0,
            ),
            delegate: new SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return _buildItemGrid2(_products2[index]);
              },
              childCount: _products2.length,
            ),
          ),
        ],
      );
複製程式碼

SliverToBoxAdapter

  SliverPersistentHeader一般來說都是會展開/收起的（除非minExtent和maxExtent值相同），那麼如果想要在滾動檢視中新增一個普通的控制元件，那麼就可以使用SliverToBoxAdapter來將各種檢視組合在一起，放在CustomListView中。

sliver_adapter.png
  上圖中框起來的部分全部都是SliverToBoxAdapter，結合SliverToBoxAdapter，滾動檢視可以任意組合：

CustomScrollView(
        physics: ScrollPhysics(),
        slivers: <Widget>[
          SliverToBoxAdapter(
            child: _buildHeader(),
          ),
          SliverGrid.count(
            crossAxisCount: 3,
            children: products.map((product) {
              return _buildItemGrid(product);
            }).toList(),
          ),
          SliverToBoxAdapter(
            child: _buildSearch(),
          ),
          SliverFixedExtentList(
            itemExtent: 100.0,
            delegate: SliverChildListDelegate(
              products.map((product) {
                return _buildItemList(product);
              }).toList(),
            ),
          ),
          SliverToBoxAdapter(
            child: _buildFooter(),
          ),
        ],
      );
複製程式碼

相關文章