文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Flutter——最详细(CustomScrollView)使用教程

2023-10-24 07:22

关注

CustomScrollView简介

创建一个 [ScrollView],该视图使用薄片创建自定义滚动效果。
[SliverList],这是一个显示线性子项列表的银子列表。
[SliverFixedExtentList],这是一种更高效的薄片,它显示沿滚动轴具有相同范围的子级的线性列表。
[SliverGrid],这是一个显示子项 2D 数组的薄片。
[SliverPadding],这是一个在另一个薄片周围添加空白空间的薄片。
[SliverAppBar],这是一个显示标题的条形,该标题可以在滚动视图滚动时展开和浮动。[ScrollNotification]
和 [NotificationListener],可用于在不使用 [ScrollController] 的情况下监视滚动位置。[索引语义]
,它允许使用滚动公告的索引来批注子列表。

使用场景:

当列表高度超出屏幕,则需要使用该组件,进而实现布局上下滑动。
我们需要注意的是 slivers 这个数组必须使用带Sliver开头的组件。

属性作用
scrollDirection滑动方向
reverse数据列表反向显示
controller滑动列表参数配置
primary自行查看
physics滑动到底部之后的滑动动画
scrollBehavior自行查看
shrinkWrap确定滚动视图的高度
cacheExtent设置缓存范围
semanticChildCount设置子视图的个数
keyboardDismissBehavior键盘关闭模式
clipBehavior布局裁剪模式
slivers它是数组格式,填充Widget

SliverPadding组件:相当于一个Padding组件,设置内边距;

 SliverPadding(            padding: EdgeInsets.all(20.w),            sliver: SliverToBoxAdapter(              child: Container(                color: Colors.black54,                child: Text("SliverToBoxAdapter"),              ),            ),          )

绿色外部红色内部则是设置的padding间距

在这里插入图片描述

SliverToBoxAdapter组件:相当于一个Container布局容器;

SliverToBoxAdapter(            child: Container(              color: Colors.black54,              child: Text("SliverToBoxAdapter"),            ),          )

SliverGrid组件:相当于一个GridView网格布局容器;
分为:SliverGrid.extent()SliverGrid.count()SliverGrid.builder()、这几个属性可以自行去源码查看

 SliverGrid.builder(            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(              crossAxisCount: 3,              childAspectRatio: 1,            ),            itemCount: data.length,            itemBuilder: (BuildContext context, int index) {              var item = data[index];              return Card(                elevation: 1,                clipBehavior: Clip.hardEdge,                child: Text(                  item.toString(),                  style: TextStyle(                    color: Colors.blueAccent,                    fontSize: 26,                  ),                ),              );            },          )

绿色部分是 SliverGrid组件实现

在这里插入图片描述

SliverList组件:相当于一个ListView网格布局容器;
分为:SliverList.separated()、SliverList.list()、 SliverList.builder()、这几个属性可以自行去源码查看

     SliverList(            delegate: SliverChildBuilderDelegate(              (BuildContext context, int index) {                return ListTile(                  title: Text('SliverList Item $index'),                );              },              childCount: 10, // 列表项的个数            ),          ),

> 这里是引用

SliverFixedExtentList组件:相当于一个ListView网格布局容器;多了一个itemExtent固定item高度属性。可以提高滑动效率。
分为:SliverFixedExtentList.list()、 SliverFixedExtentList.builder()、这几个属性可以自行去源码查看

         SliverFixedExtentList(            itemExtent: 50, // 列表项的高度            delegate: SliverChildBuilderDelegate(                  (BuildContext context, int index) {                return ListTile(                  title: Text('FixedExtent Item $index'),                );              },              childCount: 10, // 列表项的个数            ),          ),

在这里插入图片描述

SliverAppBar组件:相当于一个AppBar容器;

在这里插入图片描述

SliverAppBar、SliverPersistentHeader、SliverFixedExtentList三个组件同时使用;

          SliverPersistentHeader(            delegate: MyPersistentHeaderDelegate(), // 委托对象,控制头部视图的行为和外观            pinned: true, // 是否始终显示头部视图,无论向上滚动多少          ),          SliverFixedExtentList(![在这里插入图片描述](https://img-blog.csdnimg.cn/12c5cbf2213545c78de68a9a723c01cc.gif#pic_center)            itemExtent: 50, // 列表项的高度            delegate: SliverChildBuilderDelegate(                  (BuildContext context, int index) {                return ListTile(                  title: Text('FixedExtent Item $index'),                );              },              childCount: 20, // 列表项的个数            ),          ),

在这里插入图片描述

SliverAppBar(            title: Text(              'My App',              style: TextStyle(color: Colors.red),            ),            floating: true,            // 当向上滚动时,是否将应用栏固定在屏幕顶部            pinned: true,            // 是否始终显示应用栏,无论向上滚动多少            expandedHeight: 100,            // 展开的高度            flexibleSpace: FlexibleSpaceBar(              background:                  Image.asset('assets/googleplay.png', fit: BoxFit.cover),            ),          ),          SliverPersistentHeader(            delegate: MyPersistentHeaderDelegate(), // 委托对象,控制头部视图的行为和外观            pinned: true, // 是否始终显示头部视图,无论向上滚动多少          ),          SliverFixedExtentList(            itemExtent: 50, // 列表项的高度            delegate: SliverChildBuilderDelegate(                  (BuildContext context, int index) {                return ListTile(                  title: Text('FixedExtent Item $index'),                );              },              childCount: 20, // 列表项的个数            ),          ),

在这里插入图片描述

SliverOpacity 对应组件:Opacity
SliverAnimatedOpacity 对应组件: AnimatedOpacity
SliverFadeTransition 对应组件:FadeTransition
SliverIgnorePointer 对应组件:IgnorePointer
SliverLayoutBuilder 对应组件:LayoutBuilder
SliverOffstage 对应组件:Offstage
SliverPadding 对应组件:Padding
SliverReorderableList 对应组件:ReorderableList
SliverSafeArea 对应组件:SafeArea
SliverVisibility 对应组件:Visibility
这些具体使用请看源码自行了解;

来源地址:https://blog.csdn.net/u013290250/article/details/133906355

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯