现如今打开一个 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 的几个构造函数及用法,讨论如何实现常见的滚动列表。
完成的代码,可见。
最后
笔者最近在学习flutter,会持续地记录自己的学习过程,并放在 上。
以上就是android开发分享android使用flutter的ListView实现滚动列表的示例代码的全部内容,希望对大家的学习有所帮助,也希望大家多多支持<计算机技术网(www.ctvol.com)!!>。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/addevelopment/901912.html