Flutter组件CustomScrollView

CustomScrollView是可以使用Sliver来自定义滚动模型（效果）的组件。

可滚动组件的Sliver版

在Flutter中，Sliver通常指可滚动组件子元素，但在CustomScrollView中，需要粘起来的可滚动组件就是CustomScrollView的Sliver了
为了让可滚动组件能和CustomScrollView配合使用，Flutter提供了一些可滚动组件的Sliver版，如SliverList、SliverGrid等。
实际上Sliver版的可滚动组件和非Sliver版的可滚动组件最大的区别就是前者不包含滚动模型，而后者包含滚动模型。
CustomScrollView才可以将多个Sliver"粘"在一起，这些Sliver共用CustomScrollView的Scrollable，所以最终才实现了统一的滑动效果。

例

import 'package:flutter/material.dart';

class StudyCustomScrollView extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    //Material design风格
    return Material(
      child: CustomScrollView(
        slivers: <Widget>[
          //导航栏
          SliverAppBar(
            pinned: true,//是否固定导航栏
            expandedHeight: 200, //默认高度是状态栏和导航栏的高度
            flexibleSpace: FlexibleSpaceBar(
              title: Text("CustomScrollView"),
              centerTitle: true,//标题居中
              background: Image.asset("images/tree.jpg",fit: BoxFit.cover,),
            ),
          ),

          SliverPadding(
            padding: const EdgeInsets.all(10),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,//按2列展示
                mainAxisSpacing: 5,//主轴边距
                crossAxisSpacing: 5,//纵轴边距
                childAspectRatio: 3,//宽高比3:1
              ),

              delegate: SliverChildBuilderDelegate(
                (BuildContext context,int index){
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.blue[100*(index%8)],
                    child: Text("我是Item  $index"),
                  );
                },
                childCount: 36,
              ),
            ),
          ),

          SliverFixedExtentList(
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context,int index){
                return Container(
                  alignment: Alignment.center,
                  color: Colors.yellow[100*(index%8)],
                  child: Text("一百零八将  $index"),
                );
              },
              childCount: 108,
            ),
            itemExtent: 30,//高度为30
          ),
        ],
      ),
    );
  }

}

效果

标签：index,滚动,CustomScrollView,BuildContext,组件,Flutter,Sliver
来源： https://blog.csdn.net/xiaolaohuqwer/article/details/117740938