Flutter CustomScrollView 自定义滚动效果

版权声明：署名，允许他人基于本文进行创作，且必须基于与原先许可协议相同的许可协议分发本文 （Creative Commons）

一个自定义滚动效果的滚动视图。

CustomScrollView允许您创建各种滚动效果，比如列表、网格和展开头。例如，要创建一个滚动视图，其中包含一个扩展的应用程序栏，然后是一个列表和一个网格，请使用:SliverAppBar(展开头)、SliverList(列表)和SliverGrid(网格)。

若要控制滚动视图的初始滚动偏移，请为 控制器提供其ScrollController.initialScrollOffset属性集。

参数详解

属性	说明
scrollDirection	方向，默认Axis.vertical（垂直滚动）
reverse	数据方向，默认false（正序）
controller	控制器
primary
physics
shrinkWrap	默认false
anchor	默认0.0
cacheExtent
slivers	const <Widget>[]
semanticChildCount
dragStartBehavior	默认DragStartBehavior.start

代码示例

CustomScrollView(
        slivers: <Widget>[
          const SliverAppBar(
            pinned: true,
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Demo'),
            ),
          ),


          SliverGrid(
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200.0,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 3.0,//子控件宽高比 
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Card(
                    child: Container(
                      alignment: Alignment.centerLeft,
                      padding: EdgeInsets.all(10),
                      child: Text('data $index'),
                    ),
                  );
              },
              childCount: 20,
            ),
          ),


          SliverList(
            delegate: SliverChildListDelegate(
              //返回组件集合
              List.generate(20, (int index){
                //返回 组件
                return GestureDetector(
                  onTap: () {
                    print("点击$index");
                  },
                  child: Card(
                    child: Container(
                      alignment: Alignment.centerLeft,
                      padding: EdgeInsets.all(10),
                      child: Text('data $index'),
                    ),
                  ),
                );
              }),
            ),
          ),


        ],
      ),

效果图

完整代码

查看完整代码