基本用法

class _ESTestState extends State<ESTest> {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverSafeArea(// 使用安全区，保证创建时保留安全区，向上滚动贯穿安全区
          sliver: SliverPadding(// 给内部添加自然间距，向上滚动穿透安全区
            padding: EdgeInsets.all(10),
            sliver: SliverGrid(
              delegate: SliverChildBuilderDelegate(
                    (BuildContext context,int index){
                  return Container(
                    color: Color.fromARGB(255, Random().nextInt(256),  Random().nextInt(256),  Random().nextInt(256)),
                  );
                },
                childCount: 40,//内部控件数量
              ),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 5,
                  mainAxisSpacing: 10,
                  childAspectRatio: 1.5
              ),
            ),
          ),
        )
      ],
    );
  }
}

• 使用SliverSafeArea，可以在不使用导航条时，保留安全区，向上滚动贯穿安全区
• 使用SliverPadding，可以给内部添加padding空白，滚动时贯穿安全区
• slivers：对应的必须是Sliver类型的widget，使用普通widget放入数组会报错

混合使用案例

class _ESTestState extends State<ESTest> {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverAppBar(
          pinned: true,//控制导航条是否跟着一起滚动消失
          expandedHeight: 200,//扩展高度
          flexibleSpace: FlexibleSpaceBar(
            title: Text("头部区域，下拉可放大缩小"),
            background: Image.asset('assets/images/lb.jpeg',fit: BoxFit.cover),
          )

        ),
        SliverPadding(
          padding: EdgeInsets.all(10),
          sliver: SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 5,
                crossAxisSpacing: 5
            ),
            delegate: SliverChildBuilderDelegate(
                    (BuildContext context,int index){
                  return Container(
                      color: Color.fromARGB(255, Random().nextInt(256),Random().nextInt(256), Random().nextInt(256)),
                      child: Icon(Icons.favorite,color: Colors.white)
                  );
                },
                childCount: 7
            ),
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
                  (BuildContext context,int index){
                return ListTile(
                  leading:Text("$index 项目"),
                  trailing: Icon(Icons.face),
                );
              },
              childCount: 14
          ),
        )
      ],
    );
  }
}

SliverAppBar属性

  const SliverAppBar({
    Key key,
    this.leading,//左侧的图标或文字，多为返回箭头
    this.automaticallyImplyLeading = true,//没有leading为true的时候，默认返回箭头，没有leading且为false，则显示title
    this.title,//标题
    this.actions,//标题右侧的操作
    this.flexibleSpace,//可以理解为SliverAppBar的背景内容区
    this.bottom,//SliverAppBar的底部区
    this.elevation,//阴影
    this.forceElevated = false,//是否显示阴影
    this.backgroundColor,//背景颜色
    this.brightness,//状态栏主题，默认Brightness.dark，可选参数light
    this.iconTheme,//SliverAppBar图标主题
    this.actionsIconTheme,//action图标主题
    this.textTheme,//文字主题
    this.primary = true,//是否显示在状态栏的下面,false就会占领状态栏的高度
    this.centerTitle,//标题是否居中显示
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,//标题横向间距
    this.expandedHeight,//合并的高度，默认是状态栏的高度加AppBar的高度
    this.floating = false,//滑动时是否悬浮
    this.pinned = false,//标题栏是否固定
    this.snap = false,//配合floating使用
  })