Flutter CustomScrollView 自定义滚动效果

最新推荐文章于 2024-12-17 17:49:25 发布

原创最新推荐文章于 2024-12-17 17:49:25 发布 · 1.4w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter CustomScrollView

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文介绍了Flutter的CustomScrollView，它是一个可自定义滚动效果的滚动视图，能创建列表、网格和展开头等多种滚动效果。还提到可通过设置ScrollController.initialScrollOffset属性控制初始滚动偏移，此外包含参数详解、代码示例、效果图及完整代码。

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

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'),
                    ),
                  ),
                );
              }),
            ),
          ),


        ],
      ),