Flutter 粘合剂CustomScrollView控件

老孟导读：快乐的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(
          'http://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】：