Flutter（70）：Sliver组件之CustomScrollView

Flutter教学目录持续更新中

Github源代码持续更新中

1.CustomScrollView

一个使用slivers创建自定义的滚动效果的ScrollView
这个是Sliver组件中基础的组件，支持讲各种Sliver组件聚合在一起实现各种折叠效果，当然NestedScrollView也可以，后面会一一介绍。

2.CustomScrollView属性

= scrollDirection = Axis.vertical：滚动方向

• reverse = false：是否倒序
• controller：ScrollController 滑动控制器
• primary：当内容不足以滚动时，是否支持滚动 但是这里是不起作用的，因为CustomScrollView需要内容满了才能触发折叠效果，true 的话 controller 一定要为null
• physics：ScrollPhysics 控制用户滚动视图的交互
• shrinkWrap = false：滑动方向上是否允许最大允许高度
• anchor = 0.0：零滚动偏移位置，会在滚动方向上进行整体位置偏移 0～1
• slivers = const []：多个Sliver组件
• cacheExtent: 0.0 预加载的缓存区域

CustomScrollView中很多属性跟ListView是一样的，这里就不再展开详细讲解了：
Flutter（33）：Material组件之ListTile、RefreshIndicator、ListView、Divider

3. CustomScrollView

  _mySliverLayoutBuilder() {
    var _color = Colors.green;
    return CustomScrollView(
      scrollDirection: Axis.vertical,
      reverse: false,
      primary: true,
      anchor: 0.2,
      physics: BouncingScrollPhysics(),
      dragStartBehavior: DragStartBehavior.down,
      slivers: [
        SliverLayoutBuilder(
          builder: (BuildContext context, SliverConstraints constraints) {
            print('SliverConstraints  = $constraints');
            if (constraints.userScrollDirection == ScrollDirection.forward) {
              _color = Colors.blue;
            } else if (constraints.userScrollDirection ==
                ScrollDirection.idle) {
              _color = Colors.green;
            } else {
              _color = Colors.cyan;
            }

            return SliverToBoxAdapter(
              child: Container(
                height: 200,
                color: _color,
              ),
            );
          },
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Card(
                child: Container(
                  height: 50,
                  color: Colors.primaries[(index % 18)],
                ),
              );
            },
            childCount: 15,
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CustomScrollView'),
      ),
      body: _mySliverLayoutBuilder(),
    );
  }

image.png

下一节：Sliver组件之SliverAppBar

Flutter（71）：Sliver组件之SliverAppBar

Flutter教学目录持续更新中

Github源代码持续更新中