flutter列表无法滚动到底部_【Flutter】 CustomScrollView滚动组件和SliverAppBar可折叠的导航栏...

CustomScrollView说明

CustomScrollView是使用Sliver组件创建自定义滚动效果的滚动组件。

常用属性：

• scrollDirection滚动方向，分为垂直和水平方向。

• reverse参数表示反转滚动方向，并不是垂直转为水平，而是垂直方向滚动时，默认向下滚动，reverse设置false，滚动方向改为向上，同理水平滚动改为水平向左。

• primary设置为true时，不能设置controller，因为primarytrue时，controller使用PrimaryScrollController，这种机制带来的好处是父组件可以控制子树中可滚动组件的滚动行为，例如，Scaffold正是使用这种机制在iOS中实现了点击导航栏回到顶部的功能。

• controller为滚动控制器，可以监听滚到的位置，设置滚动的位置等

• physics表示可滚动组件的物理滚动特性

使用场景：

• ListView和GridView相互嵌套场景，ListView嵌套GridView时，需要给GridView指定高度，但我们希望高度随内容而变化(不指定)，ListView和GridView使用同一个滚动效果。

• 一个页面顶部是AppBar，然后是GridView，最后是ListView，这3个区域以整体来滚动，AppBar具有吸顶效果。

CustomScrollView就像一个粘合剂，将多个组件粘合在一起，具统一的滚动效果。

Sliver系列组件有SliverList、SliverGrid、SliverFixedExtentList、SliverPadding、SliverAppBar等。

相互嵌套场景

在实际业务场景中经常见到这样的布局，顶部是网格布局(GridView)，然后是列表布局(ListView)，滚动的时候做为一个整体，此场景是无法使用GridView+ListView来实现的，而是需要使用CustomScrollView+SliverGrid+SliverList来实现，

SliverAppBar说明

SliverAppBar控件可以实现页面头部区域展开、折叠的效果，类似于Android中的CollapsingToolbarLayout。

SliverAppBar控件通常需要和CustomScrollView搭配使用。

SliverAppBar和其他slivers控件的结构： 

SliverAppBar中有一个非常重要的参数flexibleSpace，flexibleSpace是SliverAppBar中展开和折叠区域，flexibleSpace与expandedHeight一起使用， expandedHeight表示flexibleSpace的高度，

常用属性：

leading   左侧控件，通常情况下为返回图标
title   标题，通常为Text控件
actions   右侧控件
flexibleSpace   展开和折叠区域
bottom   底部控件
elevation   阴影
backgroundColor   背景颜色
expandedHeight   展开区域的高度
floating   设置为true时，向下滑动时，即使当前CustomScrollView不在顶部，SliverAppBar也会跟着一起向下出现
pinned   设置为true时，当SliverAppBar内容滑出屏幕时，将始终渲染一个固定在顶部的收起状态
snap   设置为true时，当手指放开时，SliverAppBar会根据当前的位置进行调整，始终保持展开或收起的状态，此效果在floating=true时生效

示例

import 'package:flutter/material.dart';
class SliverAppBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverAppBar(
          pinned: true,
          expandedHeight: 200.0,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('加菲猫'),
            background: Image.network('http://img.kandao.com/NewFile/UserNewData/newUpload/2019050103383263874.jpg',
              fit: BoxFit.fill,
            ),
          ),
        ),
        SliverFixedExtentList(
          itemExtent: 90.0,
          delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {return Card(
                child: Container(
                  alignment: Alignment.center,
                  color: Colors.primaries[(index % 18)],
                  child: Text('微信关注【码上加油站】，为自己加油！'),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}

效果：

完

  码上加油站

  一起来加油

长按扫码关注