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

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容器;

  • title:指定应用栏的标题部分。 floating:当向上滚动时,设置为true会将应用栏固定在屏幕顶部。默认值为false。
  • pinned:设置为true时,应用栏始终可见,无论向上滚动多少。默认值为false。
  • expandedHeight:设置应用栏展开的高度。
  • flexibleSpace:可以将FlexibleSpaceBar作为应用栏的子项,以添加背景图像、渐变效果等。

在这里插入图片描述

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
这些具体使用请看源码自行了解;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/164673.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【持续更新】tutorial-Linux-Markdown-etc(Linux、命令、Markdown、md、Tex、LaTex)

1. Linux命令 1.1 常用 查看文件夹下文件数量: ls -l | wc -l7zip: 解压:7z x compressed_file.7z -o/path/to/destination # 注意-o和目标路径是连起来的,没有空格压缩:7z a compressed_file.zip destination_path conda 查看 conda 拥有的…

Cornerstone for Mac:高效SVN管理的黄金标准

在当今的软件开发领域,版本控制系统是不可或缺的一部分。其中,Subversion(SVN)是一个广泛使用的版本控制系统,有助于团队协同工作,实现代码的版本管理和追踪。对于Mac用户来说,Cornerstone是一款…

服务器数据恢复-linux+raid+VMwave ESX数据恢复案例

服务器数据恢复环境: 一台某品牌x3950 X6型号服务器,linux操作系统,12块硬盘组建了一组raid阵列,上层运行VMwave ESX虚拟化平台。 服务器故障: 在服务器运行过程中,该raid阵列中有硬盘掉线,linu…

【cmake】cmake生成Visual Studio工程后的INSTALL项目使用

很多开源项目使用CMake生成Visual Studio工程后会有INSTALL项目。 这个INSTALL项目是为安装编译产物,作用类似于make install。其使用与其他工程并不相同。 想安装编译产物,需右键INSTALL工程,在弹出的菜单中,选择“仅用于项目”…

一百九十、Hive——Hive刷新分区MSCK REPAIR TABLE

一、目的 在用Flume采集Kafka中的数据直接写入Hive的ODS层静态分区表后,需要刷新表,才能导入分区和数据。原因很简单,就是Hive表缺乏分区的元数据 二、实施步骤 (一)问题——在Flume采集Kafka中的数据写入HDFS后&am…

记一次EDU证书站

如果文章对你有帮助,欢迎关注、点赞、收藏一键三连支持以下哦! 想要一起交流学习的小伙伴可以加zkaq222(备注CSDN,不备注通不过哦)进入学习,共同学习进步 目录 目录 1.前言: 2.信息搜集 3.漏…

Python 文件打包成可执行文件

打包 要将Python脚本打包成可执行文件,常见的做法是使用PyInstaller或cx_Freeze工具。下面是使用PyInstaller的基本步骤: 使用conda安装pyinstaller (建议) conda install -c conda-forge pyinstaller上面的命令从conda-forge通…

二维码智慧门牌管理系统:革新小区安全管理的新力量

文章目录 前言一、外采人员的数据采集二、二维码智慧门牌管理系统的创新性三、居民的便捷体验四、面临的挑战 前言 在科技快速发展的今天,智能化和数字化已经深刻影响着我们的生活的各个方面。近期备受关注的话题之一是二维码智慧门牌管理系统,这一系统…

1 tcp协议20问

1什么是TCP网络分层 1.1分层描述 网络访问层: 2 TCP的三次握⼿中为什么是三次?为什么不是两次、四次? 两次握手的话,服务端会单方面认为建立已经成功,但是对于客户端而言,可能只是开个玩笑的&#xff0c…

[人工智能-综述-12]:第九届全球软件大会(南京)有感 -1-程序员通过大模型增强自身软件研发效率的同时,也在砸自己的饭碗

目录 前言: 一、什么是软件工程 1.1 什么软件工程 1.2 影响软件开发效能的三大因素 1.3 AI大模型是如何提升软件工程全过程效率的 二、AI大模型如何提升软件项目管理效率 2.1 概述 2.2 案例或工具 三、AI大模型如何提升软件开发工具的效率 3.1 概述 3.2 …

蓝桥每日一题(day 3: 蓝桥587.约数个数)--数学--easy

题目 解题核心&#xff1a; 分解质因数&#xff0c;每个质因数的次方1的累乘积就是anscode #include <iostream> #include<algorithm> #include<unordered_map> //# #include<> typedef long long LL; const int N 110, MOD 1e9 7;using namespac…

小程序原生代码转uniapp

写了一份小程序原生代码&#xff0c;想转为uniapp 再转为其他平台发布 1、在命令行里&#xff0c;运行【 npm install miniprogram-to-uniapp -g 】进行安装&#xff0c;因为这个包是工具&#xff0c;要求全局都能使用&#x…

《动手学深度学习 Pytorch版》 9.2 长短期记忆网络(LSTM)

解决隐变量模型长期信息保存和短期输入缺失问题的最早方法之一是长短期存储器&#xff08;long short-term memory&#xff0c;LSTM&#xff09;。它与门控循环单元有许多一样的属性。长短期记忆网络的设计比门控循环单元稍微复杂一些&#xff0c;却比门控循环单元早诞生了近 2…

【Linux】进程概念与进程状态

文章目录 一、进程概念1.进程的概念2.进程的描述-PCB 二、进程相关的基本操作1.组织进程2.查看进程3.结束进程4.通过系统调用获取进程标示符5.通过系统调用创建进程-fork初识 三、进程状态1.普遍操作系统层面的进程状态2.Linux操作系统的进程状态 四、两种特殊的进程状态1.僵尸…

软考高级系统架构设计师系列之:数学与经济管理

软考高级系统架构设计师系列之:数学与经济管理 一、数学与经济管理二、图论应用-最小生成树三、图论应用-最短路径四、图论应用-网络与最大流量五、运筹方法-线性规划六、运筹方法-动态规划七、运筹方法-转移矩阵八、运筹方法-排队论九、运筹方法-决策-不确定决策十、运筹方法…

14-bean创建流程5-初始化和循环依赖

文章目录 1.初始化和循环依赖1.1 初始化步骤1.2 循环依赖问题的产生1.3 如何解决循环依赖问题1.4 解决循环依赖二级缓存即可完成,为什么需要三级缓存1.5循环依赖有时报错1.初始化和循环依赖 1.1 初始化步骤 填充属性执行Aware执行BeanPostProcessor的postProcessBeforeInitia…

单点登录与网络犯罪生态系统

这不仅仅是你的感觉&#xff0c;网络犯罪正以惊人的速度增长。在Flare&#xff0c;我们发现2023年的数据勒索勒索软件攻击比2022年增加了112&#xff05;&#xff0c;并且网络犯罪生态系统的活动也在不断增加。 导语&#xff1a;网络犯罪的惊人增长 网络犯罪在当今社会中变得越…

chatgpt图片识别、生成图片、语音对话多模态深度试玩

大模型替代人的工作的能力&#xff0c;越来越明显了。最近chatgpt支持多模态了&#xff0c;看这大佬们玩的不易乐乎&#xff0c;手痒也想试一试&#xff0c;因此有给openai上供了20刀。 另外我是gpt的拥护者&#xff0c;但是周围的同事有对此担忧&#xff0c;因为他们长期积累的…

python学习7

前言&#xff1a;相信看到这篇文章的小伙伴都或多或少有一些编程基础&#xff0c;懂得一些linux的基本命令了吧&#xff0c;本篇文章将带领大家服务器如何部署一个使用django框架开发的一个网站进行云服务器端的部署。 文章使用到的的工具 Python&#xff1a;一种编程语言&…

Flutter 与 Dart 的市场应用

本文来自《2023年中国谷歌教育合作项目—武汉城市学院—面向Flutter框架的Dart语言师资培训与教学研讨》内容文字版。 Hello&#xff0c;大家好&#xff0c;我是 Flutter GDE 郭树煜&#xff0c;也是《Flutter 开发实战详解》的作者&#xff0c;同时也是 Github GSY 项目的负责…