Flutter 粘合劑CustomScrollView控制項

• 2020 年 5 月 6 日
• 筆記
• Android, Flutter

老孟導讀：快樂的51假期結束了，切換為努力模式，今天給大家分享CustomScrollView組件，此組件在以後的項目中會經常用到，CustomScrollView就像一個粘合劑，將多個組件粘合在一起，具統一的滾動效果。

CustomScrollView

CustomScrollView是使用Sliver組件創建自定義滾動效果的滾動組件。使用場景：

1. ListView和GridView相互嵌套場景，ListView嵌套GridView時，需要給GridView指定高度，但我們希望高度隨內容而變化（不指定），ListView和GridView使用同一個滾動效果。
2. 一個頁面頂部是AppBar，然後是GridView，最後是ListView，這3個區域以整體來滾動，AppBar具有吸頂效果。

CustomScrollView就像一個粘合劑，將多個組件粘合在一起，具統一的滾動效果。

Sliver系列組件有很多，比如SliverList、SliverGrid、SliverFixedExtentList、SliverPadding、SliverAppBar等。

相互嵌套場景

在實際業務場景中經常見到這樣的布局，頂部是網格布局（GridView），然後是列表布局（ListView），滾動的時候做為一個整體，此場景是無法使用GridView+ListView來實現的，而是需要使用CustomScrollView+SliverGrid+SliverList來實現，實現程式碼如下：

CustomScrollView(
  slivers: <Widget>[
    SliverGrid.count(crossAxisCount: 4,children: List.generate(8, (index){
      return Container(
        color: Colors.primaries[index%Colors.primaries.length],
        alignment: Alignment.center,
        child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 20),),
      );
    }).toList(),),
    SliverList(
      delegate: SliverChildBuilderDelegate((content, index) {
        return Container(
          height: 85,
          alignment: Alignment.center,
          color: Colors.primaries[index % Colors.primaries.length],
          child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 20),),
        );
      }, childCount: 25),
    )
  ],
)

效果如下：

頂部是AppBar場景

實際項目中頁面頂部是AppBar，然後是GridView，最後是ListView，這3個區域以整體來滾動，AppBar具有吸頂效果，此效果也是我們經常遇到的，用法如下：

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      pinned: true,
      expandedHeight: 230.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('復仇者聯盟'),
        background: Image.network(
          '//img.haote.com/upload/20180918/2018091815372344164.jpg',
          fit: BoxFit.fitHeight,
        ),
      ),
    ),
    SliverGrid.count(crossAxisCount: 4,children: List.generate(8, (index){
      return Container(
        color: Colors.primaries[index%Colors.primaries.length],
        alignment: Alignment.center,
        child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 20),),
      );
    }).toList(),),
    SliverList(
      delegate: SliverChildBuilderDelegate((content, index) {
        return Container(
          height: 85,
          alignment: Alignment.center,
          color: Colors.primaries[index % Colors.primaries.length],
          child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 20),),
        );
      }, childCount: 25),
    )
  ],
)

效果如下：

通過scrollDirection和reverse參數控制其滾動方向，用法如下：

CustomScrollView(
  scrollDirection: Axis.horizontal,
  reverse: true,
  ...
)

scrollDirection滾動方向，分為垂直和水平方向。

reverse參數表示反轉滾動方向，並不是垂直轉為水平，而是垂直方向滾動時，默認向下滾動，reverse設置false，滾動方向改為向上，同理水平滾動改為水平向左。

primary設置為true時，不能設置controller，因為primarytrue時，controller使用PrimaryScrollController，這種機制帶來的好處是父組件可以控制子樹中可滾動組件的滾動行為，例如，Scaffold正是使用這種機制在iOS中實現了點擊導航欄回到頂部的功能。

controller為滾動控制器，可以監聽滾到的位置，設置滾動的位置等，用法如下：

_scrollController = ScrollController();

//監聽滾動位置
    _scrollController.addListener((){
      print('${_scrollController.position}');
    });
    //滾動到指定位置
    _scrollController.animateTo(20.0);

CustomScrollView(
	controller: _scrollController,
	...
) 

physics表示可滾動組件的物理滾動特性，具體查看ScrollPhysics

交流

老孟Flutter部落格地址（近200個控制項用法）：//laomengit.com

歡迎加入Flutter交流群（微信：laomengit）、關注公眾號【老孟Flutter】：