android使用flutter的ListView实现滚动列表的示例代码
作者:流汗去 发布时间:2023-06-26 09:00:13
现如今打开一个 App,比如头条、微博,都会有长列表,随着我们不断地滑动,视窗内的内容也会不断地更新。今天就用 Flutter 实现一下这种效果。
这里的表现其实就相当于有一个固定长度的容器,然后超出的内容是不可见的,只有当你向上或向下滑动屏幕时,视窗外看不见的内容才会出现在视窗中。如果在 web 开发时,是需要容器加上样式
overflow: auto;
要想用 Flutter 实现,其实也是很简单的,因为 Flutter 为我们提供了 ListView 组件。
ListView 主要有以下几种使用方式
ListView
ListView.builder
ListView.separated
ListView.custom
ListView
ListView 是最简单直接的方式,简单,那么适用的场景也是简单的。仅适用于内容较少的情形,因为它是一次性渲染所有的 items ,当 items 的数目较多时,很容易出现卡顿现象的,导致滑动不流畅。 你可以试试加大下面 items 的大小,然后对比一 * 验效果。
class ListViewDemo extends StatelessWidget {
final _items = List<Widget>.generate(10,
(i) => Container(padding: EdgeInsets.all(16.0), child: Text("Item $i")));
@override
Widget build(BuildContext context) {
return ListView(
children: _items,
);
}
}
ListView.builder()
构造函数 builder 要求传入两个参数, itemCount
和 itemBuilder
。前者规定列表数目的多少,后者决定了每个列表如何渲染。跟 ListView 不同的点在于,这是懒加载的,假如有 1000 个列表,初始渲染时并不会所有都渲染,而只会特定数量的 item ,这对于性能和用户体验来说,是很好的提升。 你可以对比用 ListView 和用 ListView.builder 渲染 1000 个列表时,体验是否有差别。
class ListViewDemo extends StatelessWidget {
final _items = List<String>.generate(1000, (i) => "Item $i");
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 1000,
itemBuilder: (context, idx) {
return Container(
padding: EdgeInsets.all(16.0),
child: Text(_items[idx]),
);
},
);
}
}
ListView.separated()
separated 相比较于 builder,又多了一个参数 separatorBuilder
,用于控制列表各个元素的间隔如何渲染。比如,我们需要列表的每个 item 之间有一个分割线,就可以跟下面那样,加一个 Divider 组件。
class ListViewDemo extends StatelessWidget {
final _items = List<String>.generate(1000, (i) => "Item $i");
@override
Widget build(BuildContext context) {
return ListView.separated(
itemCount: 1000,
itemBuilder: (context, idx) {
return Container(
padding: EdgeInsets.all(16.0),
child: Text(_items[idx]),
);
},
separatorBuilder: (context, idx) {
return Divider();
},
);
}
}
ListView.custom()
custom,就跟名字一样,让我们自定义。必须的参数就是 childrenDelegate
, 然后传入一个 实现了 SliverChildDelegate
的组件,如 SliverChildListDelegate
和 SliverChildBuilderDelegate
。
SliverChildListDelegate
接收跟 ListView 一样的 children
,而 SliverChildBuilderDelegate
接收跟 ListView.builder 的 itemBuilder
一样类型的函数。
正常来说,前面三个已经可以满足我们的日常使用需求了,无需自定义。
总结,上面主要讨论了 ListView 的几个构造函数及用法,讨论如何实现常见的滚动列表。
完成的代码,可见list_view.dart 。
最后
笔者最近在学习flutter,会持续地记录自己的学习过程,并放在 github 上。
来源:https://juejin.im/post/5c261e2e518825480635d33a
猜你喜欢
- import android.content.Context;import android.graphics.Canvas;import a
- 前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析。PaginatedDataTablePaginatedDataT
- 1.获取签名与模板进入阿里云平台,进入短信服务模块,在以下位置添加签名和模板(格式一定按照要求填写 审批的比较严格)2.编写模板与签名的枚举
- 本文实例为大家分享了C#实现网页画图的具体代码,供大家参考,具体内容如下代码贴着保存下using System;using System.C
- Windows Data Type.NET Data TypeBOOL, BOOLEANBoolean or Int32BSTRString
- 本文实例讲述了Spring实战之协调作用域不同步的Bean操作。分享给大家供大家参考,具体如下:一 配置<?xml version=&
- 本文研究的主要是Flask实现异步非阻塞请求功能,具体实现如下。最近做物联网项目的时候需要搭建一个异步非阻塞的HTTP服务器,经过查找资料,
- 承接上文 传送门一.完善登录功能按照常理,只有登陆过后才能进入首页,若没有登陆则应当直接跳转到登陆页面,这样的场景不就完美契合过滤器的功效吗
- 最近项目中遇到了华为虚拟按键适配的问题,主页是个RecylerView(如下图),如果不做适配,在界面初始化完毕后,虚拟按键会遮挡页面或者空
- 本文实例讲述了C#遍历子目录的方法。分享给大家供大家参考。具体实现方法如下:DirectoryInfo directoryInfo = ne
- 命令模式命令模式很好理解,举个例子,司令员下令让士兵去干件事情,从整个事情的角度来考虑,司令员的作用是,发出口令,口令经过传递,传到了士兵耳
- 首先,通过一张最新(2021.11)的编程语言排名图来了解常见的编程语言:从图中可以看出,C++的排名相对于Python、Java、C来说并
- 这篇文章主要介绍了Java通过Scanner了解if...else if语句,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的
- 将10个整数按由小到大的顺序排列#include <iostream>using namespace std;int main(
- 一、什么是代理?指为一个目标对象提供一个代理对象, 并由代理对象控制对目标对象的引用. 使用代理对象, 是为了在不修改目标对象的基础上,增强
- 类的定义面向对象的程序设计中,类可以看作是我们自定义的数据类型,那么,如何能更加优美,更加高效地定义它就显得尤为重要。类中的成员有很多,每一
- 嵌入式Servlet容器在Spring Boot中,默认支持的web容器有 Tomcat, Jetty, 和 Undertow1、原理分析那
- 1 在图片上用鼠标进行操作,opencv主要用到setMouseCallback()函数。winname 窗口名称onMouse 鼠标事件的
- 1 仿射变换仿射变换:一种二维坐标到二维坐标的线性变换,它保持二维图像的平直性与平行性,即变换后直线依然是直线,平行的线依然平行。packa
- Android的消息机制几乎是面试必问的话题,当然也并不是因为面试,而去学习,更重要的是它在Android的开发中是必不可少的,占着举足轻重