轻松学会:滑动组件ListView和GridView的使用
xsobi 2024-12-11 17:48 1 浏览
今天我们用Flutter来实现这样的一个页面,类似于一个分组列表,在Android 中如果要实现一个这样的页面,实现想到的肯定是RecycleView,然后通过在adapter中设置两个item样式根据在数据中新增一个标示来区分是标题还是内容,一个控件就能搞定,但是在Flutter中并没有适配器的概念,那如果要实现这样的一个布局该怎么办?
通过分析页面得知,这应该是一个ListView嵌套一个GridView来实现的,在Android中RecycleView还没出来之前,我们如果要实现这样的一个布局,常用的方法其实也是一个ListView嵌套GridView来实现。
Flutter中ListView实际应用
@override
Widget buildBody() {
return ListView.builder(
itemBuilder: (context, index) => ItemNavigation(navigationList[index]),
itemCount: navigationList.length);
}
复制代码
代码很简单,在页面的body中定义一个ListView.builder方法就可以构建一个listView,通过查看官方文档可以知道,构建一个listView有3种方式,分别是:
1.ListView
ListView(
shrinkWrap: true,
padding: const EdgeInsets.all(20.0),
children: <Widget>[
const Text('I\'m dedicating every day to you'),
const Text('Domestic life was never quite my style'),
const Text('When you smile, you knock me out, I fall apart'),
const Text('And I thought I was so smart'),
],
);
复制代码
通过ListView构建的列表组件,需要传入一个 children参数来往列表种添加子空间,这种方式适合只有少量的子组件的情况,因为这种方式需要将所有 children 都提前创建好(这需要做大量工作),而不是等到子 widget 真正显示的时候再创建,这种方式是不支持Sliver的懒加载模型,如果控件太多,会存在性能问题。shrinkWrap为true表示填满子组件。
2.ListView.builder
ListView.builder(
... 部分参数这里没用到就没有列出来
itemBuilder: (context, index) => ItemNavigation(navigationList[index]),
itemCount: navigationList.length)
复制代码
通过ListView.builder构造的列表组件,构建方式支持动态构建,itemBuilder是用来构建列表的item,可以只定义你想要实现的item样式,这里 ItemNavigation内部包含一个 Text 组件和一个 GridView 组件,GridView实际的用法和ListView用法还是挺像的,和 Android中的GridView控件类似用来表示宫格的样式。
3.ListView.separated
ListView.separated(
... 部分参数这里没用到就没有列出来
itemBuilder: (context, index) => ItemNavigation(navigationList[index]),
itemCount: navigationList.length)
//分割器构造器
separatorBuilder: (BuildContext context, int index) {
return index%2==0?divider1:divider2;
},
);
复制代码
通过ListView.separated构造的组件,和 ListView.builder的用法区别不大,就多来一个分割构造器 separatorBuilder有时候页面每个item之间需要一个分割的控件,这时候就可以使用 ListView.separated来创建一个分割构造器,直接返回一个控件就可以了。
综上所述,当我们列表控件比较少,并且列表item样式比较多的时候,我们可以直接采用ListView来构建列表,如果列表数量比较大,而且是需要根据数据来动态控制的话,最好是采用ListView.builder来构建列表,最后如果列表如果需要分割线,或者其他的分割控件,推荐使用ListView.separated组件来实现列表。
为了能动态控制列表item数据更新,定义一个ItemNavigation类继承自 StatefulWidget来实现一个item样式,item的最外层采用一个Card包裹,通过源码可知该组件有如下属性:
const Card({
Key key,
this.color,//背景颜色
this.shadowColor, //卡片阴影颜色
this.elevation,//卡片阴影大小
this.shape, //形状
this.borderOnForeground = true,//前景色
this.margin,//内部控件间距
this.clipBehavior,//裁剪方式
this.child, //子控件
this.semanticContainer = true,
})
复制代码
这个控件和Android中的Card基本是一样,连名称都一样,主要作用是用来构造一个带阴影的卡片布局,属性也不算多,这里我们在child中添加一个竖像布局Column这个组件内部的控件都是竖像排列的,在 children属性中添加一个分类标题Text和分类内容GridView,这里的GridView也有两种方式构建,
Flutter中GridView实际应用
1.GridView
GridView({
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
@required SliverGridDelegate gridDelegate, //控制子widget layout的委托
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
double cacheExtent,
List<Widget> children = const <Widget>[],
})
复制代码
GridView和ListView的大多数参数都是相同的,我们唯一需要关注的是gridDelegate参数,类型是SliverGridDelegate,它的作用是控制GridView子组件如何排列。
SliverGridDelegate是一个抽象类,定义了GridView Layout相关接口,子类需要通过实现它们来实现具体的布局算法。Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent,我们可以直接使用。
SliverGridDelegateWithFixedCrossAxisCount
该子类实现了一个横轴为固定数量子元素的layout算法,其构造函数为:
SliverGridDelegateWithFixedCrossAxisCount({
@required double crossAxisCount, //横轴子元素的数量。此属性值确定后子元素在横轴的长度就确定了,即ViewPort横轴长度除以crossAxisCount的商
double mainAxisSpacing = 0.0,//主轴方向的间距。
double crossAxisSpacing = 0.0,//横轴方向子元素的间距。
double childAspectRatio = 1.0,//子元素在横轴长度和主轴长度的比例。由于crossAxisCount指定后,子元素横轴长度就确定了,然后通过此参数值就可以确定子元素在主轴的长度。
})
复制代码
SliverGridDelegateWithMaxCrossAxisExtent
该子类实现了一个横轴子元素为固定最大长度的layout算法,其构造函数为:
SliverGridDelegateWithMaxCrossAxisExtent({
double maxCrossAxisExtent,//为子元素在横轴上的最大长度
double mainAxisSpacing = 0.0,//主轴方向的间距。
double crossAxisSpacing = 0.0,//横轴方向子元素的间距。
double childAspectRatio = 1.0,//子元素在横轴长度和主轴长度的比例。由于crossAxisCount指定后,子元素横轴长度就确定了,然后通过此参数值就可以确定子元素在主轴的长度。
})
复制代码
2.GridView.builder
当子widget比较多时,我们可以通过GridView.builder来动态创建子widget。GridView.builder 必须指定的参数有两个:
GridView.builder(
...
@required SliverGridDelegate gridDelegate,
@required IndexedWidgetBuilder itemBuilder,
)
复制代码
其中itemBuilder为子widget构建器。具体用法如下:
GridView.builder(
//将所有子控件在父控件中填满
shrinkWrap: true,
padding: EdgeInsets.only(
left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
//解决ListView嵌套GridView滑动冲突问题
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, //每行几列
childAspectRatio: 3),
itemCount: widget.navigationData.articles.length,
itemBuilder: (context, index) {
//要返回的item样式
},
);
})
复制代码
这里要注意一点的是,因为我们这里的GridView是嵌套在ListView中的,GridView,ListView都是支持滑动的,所以为来避免滑动冲突我们需要禁用子控件的滑动事件,在GridView中添加 physics:NeverScrollableScrollPhysics(),就可以禁用其滑动事件,physics属性对所有支持滑动的控件都支持,也包含ListView。
Flutter中滑动组件总结
Flutter中不论是GridView还是ListView都是有很多的相同之处,都有不同的构造函数,都支持Sliver的延迟构建,,Flutter中提出一个Sliver概念,如果一个可滚动组件支持Sliver模型,那么该滚动可以将子组件分成好多个Sliver,只有当Sliver出现在视口中时才会去构建它,这种模型也称为“基于Sliver的延迟构建模型”。简单来说就类似于Android上面的,RecycleView复用机制,只构建当前窗口的数据模型,这样做的好处就是可以提升列表的性能。
最后,咱给小编:
1. 点赞+关注
2. 点头像关注后多多评论,转发给有需要的朋友。
谢谢!!
相关推荐
- 好用的云函数!后端低代码接口开发,零基础编写API接口
-
前言在开发项目过程中,经常需要用到API接口,实现对数据库的CURD等操作。不管你是专业的PHP开发工程师,还是客户端开发工程师,或者是不懂编程但懂得数据库SQL查询,又或者是完全不太懂技术的人,通过...
- 快速上手:Windows 平台上 cURL 命令的使用方法
-
在工作流程中,为了快速验证API接口有效性,团队成员经常转向直接执行cURL命令的方法。这种做法不仅节省时间,而且促进了团队效率的提升。对于使用Windows系统的用户来说,这里有一套详细...
- 使用 Golang net/http 包:基础入门与实战
-
简介Go的net/http包是构建HTTP服务的核心库,功能强大且易于使用。它提供了基本的HTTP客户端和服务端支持,可以快速构建RESTAPI、Web应用等服务。本文将介绍ne...
- #小白接口# 使用云函数,人人都能编写和发布自己的API接口
-
你只需编写简单的云函数,就可以实现自己的业务逻辑,发布后就可以生成自己的接口给客户端调用。果创云支持对云函数进行在线接口编程,进入开放平台我的接口-在线接口编程,设计一个新接口,设计和配置好接口参...
- 极度精神分裂:我家没有墙面开关,但我虚拟出来了一系列开关
-
本内容来源于@什么值得买APP,观点仅代表作者本人|作者:iN在之前和大家说过,在iN的家里是没有墙面开关的。...
- window使用curl命令的注意事项 curl命令用法
-
cmd-使用curl命令的注意点前言最近在cmd中使用curl命令来测试restapi,发现有不少问题,这里记录一下。在cmd中使用curl命令的注意事项json不能由单引号包括起来json...
- Linux 系统curl命令使用详解 linuxctrl
-
curl是一个强大的命令行工具,用于在Linux系统中进行数据传输。它支持多种协议,包括HTTP、HTTPS、FTP等,用于下载或上传数据,执行Web请求等。curl命令的常见用法和解...
- Tornado 入门:初学者指南 tornados
-
Tornado是一个功能强大的PythonWeb框架和异步网络库。它最初是为了处理实时Web服务中的数千个同时连接而开发的。它独特的Web服务器和框架功能组合使其成为开发高性能Web...
- PHP Curl的简单使用 php curl formdata
-
本文写给刚入PHP坑不久的新手们,作为工具文档,方便用时查阅。CURL是一个非常强大的开源库,它支持很多种协议,例如,HTTP、HTTPS、FTP、TELENT等。日常开发中,我们经常会需要用到cur...
- Rust 服务器、服务和应用程序:7 Rust 中的服务器端 Web 应用简介
-
本章涵盖使用Actix提供静态网页...
- 我给 Apache 顶级项目提了个 Bug apache顶级项目有哪些
-
这篇文章记录了给Apache顶级项目-分库分表中间件ShardingSphere提交Bug的历程。说实话,这是一次比较曲折的Bug跟踪之旅。10月28日,我们在GitHub上提...
- linux文件下载、服务器交互(curl)
-
基础环境curl命令描述...
- curl简单使用 curl sh
-
1.curl--help#查看关键字2.curl-A“(添加user-agent<name>SendUser-Agent<name>toserver)”...
- 常用linux命令:curl 常用linux命令大全
-
//获取网页内容//不加任何选项使用curl时,默认会发送GET请求来获取内容到标准输出$curlhttp://www.baidu.com//输出<!DOCTYPEh...
- 三十七,Web渗透提高班之hack the box在线靶场注册及入门知识
-
一.注册hacktheboxHackTheBox是一个在线平台,允许测试您的渗透技能和代码,并与其他类似兴趣的成员交流想法和方法。它包含一些不断更新的挑战,并且模拟真实场景,其风格更倾向于CT...
- 一周热门
- 最近发表
-
- 好用的云函数!后端低代码接口开发,零基础编写API接口
- 快速上手:Windows 平台上 cURL 命令的使用方法
- 使用 Golang net/http 包:基础入门与实战
- #小白接口# 使用云函数,人人都能编写和发布自己的API接口
- 极度精神分裂:我家没有墙面开关,但我虚拟出来了一系列开关
- window使用curl命令的注意事项 curl命令用法
- Linux 系统curl命令使用详解 linuxctrl
- Tornado 入门:初学者指南 tornados
- PHP Curl的简单使用 php curl formdata
- Rust 服务器、服务和应用程序:7 Rust 中的服务器端 Web 应用简介
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- patch补丁 (31)
- strcat (25)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- element style (30)
- dedecms模版 (53)
- vs打不开 (29)
- nmap (30)
- webgl开发 (24)
- parse (24)
- c 视频教程下载 (33)
- paddleocr (28)
- listview排序 (33)
- firebug 使用 (31)
- transactionmanager (30)
- characterencodingfilter (33)
- getmonth (34)
- commandtimeout (30)
- hibernate教程 (31)
- label换行 (33)
- curlpost (31)