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
猜你喜欢
- [LeetCode] 9. Palindrome Number 验证回文数字Determine whether an integer is
- 在windows环境下,我们通常在IDE如VS的工程中开发C++项目,对于生成和使用静态库(*.lib)与动态库(*.dll)可能都已经比较
- 更新了AS 3.1.2之后,发现新建Kotlin类,类注释依然木有,没办法只有自己动手了。方法很简单,编辑File Header就可以啦。只
- 前言开发中,免不了会用到多边形、多角星等图案,比较常用的多边形比如雷达图、多角星比如评价星级的五角星等,本篇文章就使用Flutter绘制封装
- 在实际开发中,我们经常会需要在页面跳转的时候携带路由参数,典型的例子就是从列表到详情页的时候,需要携带详情的 id,以便详情页获取对应的数据
- 模拟登陆的原理很简单,就是发送一个Http 请求服务器获得响应,然后客户端获取到cookie即可实现模拟登陆,比如一些抢票软件的原理无非也是
- 最近没事写了一个简易浏览器,在刚开始写的时候遇到一些问题,主要的问题就是如何在自己的webview中显示所有的网页数据,不过不指
- 最近“全网域(Web Scale)”一词被炒得火热,人们也正在通过扩展他们的应用程序架构来使他们的系统变得更加“全网域”。但是究竟什么是全网
- 很多时候我们开发的软件需要向用户提供软件参数设置功能,例如我们常用的QQ,用户可以设置是否允许陌生人添加自己为好友。对于软件配置参数的保存,
- 本文主要介绍我为桌面和 Web 设计的一个超级秘密 Flutter 项目使用了画布和可拖动节点界面。本教程将展示我如何使用堆栈来使用小部件完
- 需求基于MTK8163 8.1平台定制导航栏部分,在左边增加音量减,右边增加音量加思路需求开始做之前,一定要研读SystemUI Navig
- 本文实例讲述了C#创建临时文件的方法。分享给大家供大家参考。具体分析如下:C#可以通过Path.GetTempFileName获得一个临时文
- 因为mybatis好使,所以几乎需要操作数据库的时候,我都会使用mybatis,而且在一个正式的项目中,同时存在BS和CS的程序,都使用的M
- 1. 前言现在很多应用都有小悬浮窗的功能,比如看直播的时候,通过Home键返回桌面,直播的小窗口仍可以在屏幕上显示。下面将介绍下悬浮窗的的一
- 光流的概念是由一个叫Gibson的哥们在1950年提出来的。它描述是空间运动物体在观察成像平面上的像素运动的瞬时速度,利用图像序列中像素在时
- 需求:有些时候,我们需要连接多个数据库,但是,在方法调用前并不知道到底是调用哪个。即同时保持多个数据库的连接,在方法中根据传入的参数来确定。
- 1. 在原有工程目录右键-> new ->Module->:2. 选择library:3. 一路next,最后finish
- 讲这个例子前,咱们先来看一个简单的程序:字符串数组实现数字转字母:#include <stdio.h>#include <
- 本文的目的是要实现左右滑动的指引效果。那么什么是指引效果呢?现在的应用为了有更好的用户体验,一般会在应用开始显示一些指引帮助页面,使用户能更
- 报错翻译: compileSdkVersion android-24”需要JDK 1.8或更高版本编译。报错现象如下图:原因:st