Flutter ListView 和 ScrollPhysics 之详解
xsobi 2024-11-26 10:13 21 浏览
本文旨在对 ListView 类、ScrollPhysics 以及通用小部件的调整和优化进行更详细的探索。
Flutter 中的 ListView 是可滚动的线性列表。我们可以使用它来制作可滚动的项目列表或制作重复项目的列表。
探索 ListView 的类型
我们将从查看 ListView 的类型开始,然后查看其他功能和对其进行的巧妙修改。
我们来看看 ListView 的类型有:
- 列表显示
- ListView.builder
- ListView.separated
- ListView.custom
让我们一一探索这些类型:
ListView
这是 ListView 类的默认构造函数。 ListView 只需要一个子列表并使其可滚动。
代码的一般格式是:
ListView(
children: <Widget>[
ItemOne(),
ItemTwo(),
ItemThree(),
],
),
通常这应该与少量子项一起使用,因为 List 也会在列表中构造不可见的元素,并且大量元素可能会导致效率低下。
ListView.builder()
builder() 构造函数构造一个重复的项目列表。构造函数有两个主要参数:一个 itemCount 用于列表中的项目数,一个 itemBuilder 用于构造每个列表项。
代码的一般格式是:
ListView.builder(
itemCount: itemCount,
itemBuilder: (context, position) {
return listItem();
},
),
列表项是惰性构建的,这意味着仅构建特定数量的列表项,当用户向前滚动时,较早的列表项将被销毁。
巧妙的技巧:由于元素是延迟加载的,并且只加载了所需数量的元素,因此我们实际上不需要 itemCount 作为强制参数,并且列表可以是无限的。
ListView.builder(
itemBuilder: (context, position) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(position.toString(), style: TextStyle(fontSize: 22.0),),
),
);
},
),
ListView.separated()
在 separator() 构造函数中,我们生成一个列表,我们可以指定每个项目之间的分隔符。
本质上,我们构造了两个交织的列表:一个作为主列表,一个作为分隔列表。
请注意,这里不能使用前面构造函数中讨论的无限计数,并且此构造函数强制使用 itemCount。
这种类型的代码如下:
ListView.separated(
itemBuilder: (context, position) {
return ListItem();
},
separatorBuilder: (context, position) {
return SeparatorItem();
},
itemCount: itemCount,
),
这种类型的列表允许您动态定义分隔符,为不同类型的项目设置不同类型的分隔符,在需要时添加或删除分隔符等。
此实现还可用于轻松插入其他类型的元素(例如广告),而无需对列表项中间的主列表进行任何修改。
注意:分隔符列表长度需要比项目列表小1,因为在最后一个元素之后不存在分隔符。
ListView.custom()
顾名思义,custom() 构造函数可让您构建具有自定义功能的 ListViews,以了解如何构建列表的子项。为此所需的主要参数是构建项目的 SliverChildDelegate。
SliverChildDelegates 的类型是
- SliverChildListDelegate
- SliverChildBuilderDelegate
SliverChildListDelegate 接受子级的直接列表,而 SliverChildBuiderDelegate 接受 IndexedWidgetBuilder(我们使用的构建器函数)。
您可以使用或子类化这些来构建您自己的委托。
ListView.builder 本质上是一个带有 SliverChildBuilderDelegate 的 ListView.custom。
ListView 默认构造函数的行为类似于带有 SliverChildListDelegate 的 ListView.custom。
现在我们已经完成了任务 ListViews 的类型,让我们来看看 ScrollPhysics。
探索 ScrollPhysics
为了控制滚动发生的方式,我们在 ListView 构造函数中设置了物理参数。
不同类型的物理是:
NeverScrollableScrollPhysics
NeverScrollableScrollPhysics 使列表不可滚动。使用它来完全禁用 ListView 的滚动。
BouncingScrollPhysics
BouncingScrollPhysics 在列表结束时弹回列表。这种效果在iOS上比较常见。
ClampingScrollPhysics
这是 Android 上次使用的是默认滚动物理。该列表在最后停止并给出指示它的效果。
FixedExtentScrollPhysics
这与此列表中的其他内容略有不同,因为它仅适用于 FixedExtendScrollControllers 和使用它们的列表一样。例如,我们将采用 ListWheelScrollView 来制作一个类似轮子的列表。
FixedExtentScrollPhysics 仅滚动到项目而不是两者之间的任何偏移量。
这个例子的代码非常简单:
FixedExtentScrollController fixedExtentScrollController =
new FixedExtentScrollController();
ListWheelScrollView(
controller: fixedExtentScrollController,
physics: FixedExtentScrollPhysics(),
children: monthsOfTheYear.map((month) {
return Card(
child: Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
month,
style: TextStyle(fontSize: 18.0),
),
)),
],
));
}).toList(),
itemExtent: 60.0,
),
还有一些事情要知道
如何使被破坏的元素在列表中保持活跃?
Flutter 提供了一个 KeepAlive() 小部件,它可以让一个本来会被销毁的项目保持活动状态。在列表中,元素默认被包装在 AutomaticKeepAlive 小部件中。
可以通过将 addAutomaticKeepAlives 字段设置为 false 来禁用 AutomaticKeepAlives。这些元素需要保持活动状态或 KeepAlive 的自定义实现的情况下很有用。
为什么我的 ListView 在列表和外部小部件之间有空间?
默认情况下,ListView 在它和外部小部件之间有填充,要删除它,请将填充设置为 EdgeInsets.all(0.0)。
相关推荐
- 给织梦栏目增加链接属性rel、nofollow和target
-
摘要:为了方便管理,直接在织梦后台栏目里自由把控每个栏目对应的链接属性,我们来给织梦栏目增加链接属性rel="nofllow"rel="external"rel=&...
- Rust+Tauri2+React+TS剪切板管理桌面端应用开发示例
-
随着Tauri2.0的发布,Tauri越来越值得关注,当然与名气更大的Electron相比仍有差距,但因其有Rust加持,仍表现出很大潜力,如果想开发【小而美】的桌面端App,Tauri是个不错的选择...
- 宇宙厂:为什么前端要了解 Interaction to Next Paint (INP)
-
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!2024年3月,Interactio...
- 前端知识分享:vue3中,v-model核心用法
-
本文讲一下:在vue中,用于组件双向绑定的语法,v-model。什么是组件呢?简单来说,就是拼接成网页的一个个元素。我们制作网页就跟搭积木一样,这放一个button,那放一个表单,这放一个div,那...
- 前端入门——html 表单
-
前言前面已经学习相关html大部分知识,基本上可以制作出简单的页面,但是这些页面都是静态的,一个网站如果要实现用户的互动交流,这时表单就起到关键的作用,表单的用途很多,它主要用来收集用户的相关信息,是...
- web前端Jquery学习笔记一
-
学习大纲一、了解Jquery1.什么是jqueryJquery是一款优秀的JavaScript框架,它是一个轻量的JS库,它兼容CSS3,还兼容各种浏览器(IE6.0+,火狐1.5+,谷歌,safa...
- 做个简单的本地弹幕播放器
-
前言本文仅仅是做一个简单的弹幕播放器本文弹幕播放器仅仅是演示一下发送弹幕功能请跳转本文底部的在线调试代码进行调试最终实现效果如下:Okay.首先你得找到一个弹幕开源库就是这个啦:https://git...
- RocketMQ源码分析七之创建ConsumerGroup
-
在本章中,我们将分析RocketMQ是如何创建订阅组的。看看RocketMQ是如何实现的。如何开启&关闭在部署RocketMQ的Broker的时候,我们通常都会把autoC...
- 「春运专题」“春运倒计时第二天”(教你如何抢下铺)
-
工具/原料360极速浏览器方法/步骤在电脑上运行360极速浏览器,如果电脑中没有,不仿装一个试试。进入12306网站主页面。在订票中选中要坐的车次和日期,之后点击“预订”进入登录页面;按提示完成登录操...
- 初识HTML——列表标签和表单标签
-
列表标签在html中列表分为无序列表、有序列表和自定义列表(项目列表)。接下来就看看他们有什么不同吧!作用:如果说table标签是用来显示数据的,那么列表标签就是用来进行html页面布局的。无序列表语...
- 注册windows系统服务
-
一、把任意exe程序注册成windows系统服务1、方法一:使用windows自带的命令InstallUtil.exe步骤:运行--〉cmd:打开cmd命令框,在命令行里定位到InstallUtil...
- DeepSeek火爆全网!我用它做个数学计算题生成器
-
作为一名家长,你是否曾为孩子的数学作业头疼不已?每天都要手动出题,检查答案,费时费力。最近,我借助DeepSeek的帮助,开发了一个简单实用的“数学计算题生成器”,彻底解决了这个问题!现在,我将分...
- “五一”假期火车票抢票攻略:如何在12306网站选择上中下铺
-
目前,火车票预售期为60天计算,准备“五一”小长假铁路出行的旅客今天可以购票了。记者从北京铁路局获悉,今天(3月3日)起,电话订票与互联网同时发售5月1日之前(含1日)的车票;也就是说3月3日-5日,...
- 【HarmonyOS Next之旅】兼容JS的类Web开发(四) -> swiper
-
目录1->创建Swiper组件2->添加属性3->设置样式4->绑定事件5->场景示例编辑1->创建Swiper组件在pages/index...
- 表单元素之选择类型
-
表单元素的选择类型可以分为三种:单选多选下拉单选和复选框的属性值可以有两个:disabled(不可操作的)和checked。下拉框的属性值可以是:selected(默认选中)、multiple(...
- 一周热门
- 最近发表
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- dedecms模版 (53)
- c 视频教程下载 (33)
- listview排序 (33)
- characterencodingfilter (33)
- getmonth (34)
- label换行 (33)
- android studio 3 0 (34)
- html转js (35)
- 索引的作用 (33)
- checkedlistbox (34)
- xmlhttp (35)
- mysql更改密码 (34)
- 权限777 (33)
- htmlposition (33)
- 学校网站模板 (34)
- textarea换行 (34)
- 轮播 (34)
- asp net三层架构 (38)
- bash (34)