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.mzph.cn/news/112359.shtml

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

相关文章

JavaScript爬虫程序实现自动化爬取tiktok数据教程

以下是一个使用 request-promise 和 JavaScript 的爬虫程序,用于爬取tiktok的内容。此程序使用了 https://www.duoip.cn/get_proxy 这段代码。 // 引入 request-promise 库 const rp require(request-promise);// 定义 get\_proxy 函数 function get_proxy() {retu…

家装、家居两不误,VR全景打造沉浸式家装体验

当下,用户对生活品质要求日益提升,越来越多的用户对多功能家装用品需求较大,由此造就了VR全景家装开始盛行。VR全景家装打破传统二维空间模式,通过视觉、交互等功能让用户更加真实、直观的体验和感受家居布置的效果。 一般来说&am…

基于PHP的蛋糕甜品商店管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding) 代码参考数据库参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…

pytest利用request fixture实现个性化测试需求详解

这篇文章主要为大家详细介绍了pytest如何利用request fixture实现个性化测试需求,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下− 前言 在深入理解 pytest-repeat 插件的工作原理这篇文章中,我们看到pytest_repeat源码中有这样一段 import pyt…

深拷贝和浅拷贝

一、深浅拷贝是什么? 首先我们要明白一点,js中数据类型分为: 基本数据类型: Number, String, Boolean, Null, Undefined, Symbol 引用数据类型: Object ,Array , Function 对于引用数据 类型才有深浅拷贝的说法 1. 浅拷贝&…

An Embarrassingly Easy but Strong Baseline for Nested Named Entity Recognition

原文链接: https://aclanthology.org/2023.acl-short.123.pdf ACL 2023 介绍 问题 基于span来解决嵌套ner任务的范式,大多都是先对span进行枚举,然后对每个span进行分类,实际就是得到一个分数矩阵,矩阵中每个元素表示一…

书单|1024程序员狂欢节充能书单!

点击链接进入图书专题 1024程序员节 “IT有得聊”是机械工业出版社旗下IT专业资讯和服务平台,致力于帮助读者在广义的IT领域里,掌握更专业、更实用的知识与技能,快速提升职场竞争力。 点击蓝色微信名可快速关注我们。 一年一度的1024程序员…

Python---循环---while循环

Python中的循环 包括 while循环与for循环,本文以while循环为主。 Python中所有的知识点,都是为了解决某个问题诞生的,就好比中文的汉字,每个汉字都是为了解决某种意思表达而诞生的。 1、什么是循环 现实生活中,也有…

Flink 的集群资源管理

集群资源管理 一、ResourceManager 概述 1、ResourceManager 作为统一的集群资源管理器,用于管理整个集群的计算资源,包括 CPU资源、内存资源等。 2、ResourceManager 负责向集群资源管理器申请容器资源启动TaskManager实例,并对TaskManag…

Unity DOTS System与SystemGroup概述

最近DOTS终于发布了正式的版本, 我们来分享以下DOTS里面System关键概念,方便大家上手学习掌握Unity DOTS开发。 对惹,这里有一个游戏开发交流小组,希望大家可以点击进来一起交流一下开发经验呀! System是迭代计算与处理World中的…

ASEMI肖特基二极管MBR10100CT参数,MBR10100CT封装

编辑-Z MBR10100CT参数描述: 型号:MBR10100CT 最大重复峰值反向电压VRRM:100V 最大RMS电压VRMS:70V 最大直流阻断电压VDC:100V 最大平均正向电流IF:10A 峰值正向浪涌电流IFSM:150A 最大…

JAVA发送消息到RabbitMq

项目中&#xff0c;作为生产者自定义消息发送到RabbitMq。 1.引入rmq依赖 <!-- rabbitmq 依赖 --><dependency><groupId>com.rabbitmq</groupId><artifactId>amqp-client</artifactId><version>5.9.0</version></dependen…

【C++】vector

vector基本介绍 1. vector 表示可变大小数组的序列容器。 2. 就像数组一样&#xff0c; vector 也采用的连续存储空间来存储元素。也就是意味着可以采用下标对 vector 的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c;它的大小是可以动态改变的&#x…

光储并网直流微电网simulink仿真模型,光伏采用mppt实现最大功率输出研究

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Linux内核驱动开发:技能、应用和挑战

Linux内核驱动开发&#xff1a;技能、应用和挑战 Linux内核驱动开发所需技能包括C语言和汇编语言编程、Linux系统编程接口、内核原理和机制、设备驱动开发和调试技术等。同时&#xff0c;熟悉常用的开发环境和工具如GNU工具链、make、gcc、gdb等也是必要的。 Linux内核驱动开…

亚马逊云科技Amazon CodeWhisperer 极客之选!

使用了一段时间的Amazon CodeWhisperer&#xff0c;直接作为插件搭配VS Code&#xff0c;安装很方便。 在平常写代码的时候使用率很高&#xff0c;个人使用过最近的语言大模型&#xff0c;感觉这个CodeWhisperer像是专门是在代码数据上训练的模型&#xff0c;但是又不止是会写代…

单链表算法经典OJ题

目录 1、移除链表元素 2、翻转链表 3、合并两个有序链表 4、获取链表的中间结点 5、环形链表解决约瑟夫问题 6、分割链表 1、移除链表元素 203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; typedef struct ListNode LSNode; struct ListNode* remove…

Nginx介绍,nginx高级应用,nginx虚拟主机配置

HTTP介绍 在应用层 : HTTP&#xff0c;FTP&#xff0c;ssh&#xff0c;SMTP&#xff0c;POP3 网络层&#xff1a; TCP&#xff0c;UDP TCP:可靠的&#xff0c; UDP&#xff1a;不可靠的&#xff0c;直播&#xff0c;视频 qq 微信 HTTP协议是Hyper Text Transfer Protocol&#…

宏电股份RedCap产品亮相迪拜华为MBBF,并参与RedCap全球商用阶段性成果发布

10月10-11日&#xff0c;由华为主办的第十四届全球移动宽带论坛&#xff08;MBBF&#xff09;在阿联酋迪拜成功举办。MBBF期间&#xff0c;华为联合宏电股份等产业伙伴集中发布RedCap商用阶段性成果。本次发布是RedCap产业的关键里程碑&#xff0c;标志着RedCap在全球已具备规模…

使用 Service 把前端连接到后端

使用 Service 把前端连接到后端 如何创建前端&#xff08;Frontend&#xff09;微服务和后端&#xff08;Backend&#xff09;微服务。后端微服务是一个 hello 欢迎程序。 前端通过 nginx 和一个 Kubernetes 服务暴露后端所提供的服务。 使用部署对象&#xff08;Deployment ob…