ListView()
第一种使用方法就是直接调用其默认构造函数来创建列表,效果等同于RN中的ScrollView组件。但是这种方式创建的列表存在一个问题:对于那些长列表或者需要较昂贵渲染开销的子组件,即使还没有出现在屏幕中但仍然会被ListView所创建,这将是一项较大的开销,使用不当可能引起性能问题甚至卡顿。
不过话说回来,虽然该方法可能会有性能问题,但还是取决于其不同的应用场景而定。下面我们就来看下其构造函数(已省略不常用属性):
ListView({
Axis scrollDirection = Axis.vertical,
ScrollController controller,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
this.itemExtent,
double cacheExtent,
List children = const [],
})
scrollDirection: 列表的滚动方向,可选值有Axis的horizontal和vertical,可以看到默认是垂直方向上滚动;
controller : 控制器,与列表滚动相关,比如监听列表的滚动事件;
physics: 列表滚动至边缘后继续拖动的物理效果,Android与iOS效果不同。Android会呈现出一个波纹状(对应ClampingScrollPhysics),而iOS上有一个回弹的弹性效果(对应BouncingScrollPhysics)。如果你想不同的平台上呈现各自的效果可以使用AlwaysScrollableScrollPhysics,它会根据不同平台自动选用各自的物理效果。如果你想禁用在边缘的拖动效果,那可以使用NeverScrollableScrollPhysics;
shrinkWrap: 该属性将决定列表的长度是否仅包裹其内容的长度。当ListView嵌在一个无限长的容器组件中时,shrinkWrap必须为true,否则Flutter会给出警告;
padding: 列表内边距;
itemExtent: 子元素长度。当列表中的每一项长度是固定的情况下可以指定该值,有助于提高列表的性能(因为它可以帮助ListView在未实际渲染子元素之前就计算出每一项元素的位置);
cacheExtent: 预渲染区域长度,ListView会在其可视区域的两边留一个cacheExtent长度的区域作为预渲染区域(对于ListView.build或ListView.separated构造函数创建的列表,不在可视区域和预渲染区域内的子元素不会被创建或会被销毁);
children: 容纳子元素的组件数组。
ListView.build()
ListView默认构造函数虽使用简单,但不适用于长列表。为此,我们来看下ListView.build构造函数:
ListView.builder({
...
int itemCount,
@required IndexedWidgetBuilder itemBuilder,
})
这里省略了不常用以及和ListView
默认构造函数重复的一些参数,相比之下我们可以发现ListView.builder
多了两个新的参数:
-
itemCount
: 列表中元素的数量; -
itemBuilder
: 子元素的渲染方法,允许自定义子元素组件(等同于rn
中FlatList
组件的renderItem
属性)。
不同于ListView
默认构造函数通过children
参数指定子元素的这种方式,ListView.build
通过暴露统一的itemBuilder
方法将渲染子元素的控制权交还给调用方。这里我们用一个微信公众号的例子来说明ListView.build
的使用方法(公众号卡片的样式布局可以看这里,也算是对基础组件的一个巩固和复习):
代码(文件地址)
ListView.separated()
绝大多数列表类的需求我们都可以用ListView.build
构造函数来解决问题,不过有的列表子项之间需要分割线
,此时我们可以用Flutter
提供的另一个构造函数ListView.separated
来创建列表。来看下其构造函数有什么不同:
ListView.separated({
...
@required IndexedWidgetBuilder separatorBuilder
})
相比于ListView.build
构造函数,可以看到ListView.separated
仅仅是多了一个separatorBuilder
必填参数。顾名思义,这就是暴露给调用方自定义分割线组件的回调方法。以支付宝的好友列表为例(好友卡片的样式布局可以看这里),我们来看下ListView.separated
的使用方法:
代码(文件地址)
ListView ListTile
ListTile 是Flutter 给我们准备好的widget 提供非常常见的构造和定义方式,包括文字,icon,点击事件,一般是能够满足基本需求,但是就不能自己定义了
ListTile 属性
this.leading, // item 前置图标
this.title, // item 标题
this.subtitle, // item 副标题
this.trailing, // item 后置图标
this.isThreeLine = false, // item 是否三行显示
this.dense, // item 直观感受是整体大小
this.contentPadding, // item 内容内边距
this.enabled = true,
this.onTap, // item onTap 点击事件
this.onLongPress, // item onLongPress 长按事件
this.selected = false, // item 是否选中状态
ListView builder
builder 顾名思义 构造 可以非常方便的构建我们自己定义的child布局,所以在Flutter中非常的常用。
builder属性详细介绍
//设置滑动方向 Axis.horizontal 水平 默认 Axis.vertical 垂直
scrollDirection: Axis.vertical,
//内间距
padding: EdgeInsets.all(10.0),
//是否倒序显示 默认正序 false 倒序true
reverse: false,
//false,如果内容不足,则用户无法滚动 而如果[primary]为true,它们总是可以尝试滚动。
primary: true,
//确定每一个item的高度 会让item加载更加高效
itemExtent: 50.0,
//内容适配
shrinkWrap: true,
//item 数量
itemCount: list.length,
//滑动类型设置
physics: new ClampingScrollPhysics(),
//cacheExtent 设置预加载的区域
cacheExtent: 30.0,
//滑动监听
// controller ,
首先,本文介绍了常用的ListView
,ListView.build
和ListView.separated
三种构造方法来创建列表,并结合实际的例子加以说明其不同的使用场景。紧接着,又介绍了列表组件下拉刷新
和上拉加载
这两个较常用到的交互操作在Flutter
中应该如何实现。
通过文中的5个实际例子,相信你一定已经对Flutter
中如何使用ListView
有了初步了解,剩下的就是多练习(盘它)咯~
本文所有代码托管在这儿,也可以关注我的Blog。