在上一篇文章中,我们学习了Flutter
中使用频率最高的一些基础组件。但是在一些场景中,当组件的宽度或高度超出屏幕边缘时,Flutter
往往会给出overflow
警告,提醒有组件溢出屏幕。为了解决这个问题,今天我们就来学习最常用的一个滚动型容器组件
— ListView组件
。
2. ListView使用方法
从功能比较上来看,Flutter
中的ListView
组件和RN
中的ScrollView
/FlatList
非常相似,但是在使用方法上还是有点区别。接下来,就跟着我一起来看看ListView
组件都有哪些常用的使用方法。
2.1 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
组件来包裹上篇文章中实现的银行卡,宠物卡片,朋友圈这三个例子:
代码(文件地址)
class NormalList extends StatelessWidget {
const NormalList({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView(
children: [
CreditCard(data: creditCardData),
PetCard(data: petCardData),
FriendCircle(data: friendCircleData),
],
);
}
}
预览
可以看到,默认构造函数
的用法非常之简单,直接把子元素组件放在children
数组中就可以了。但是潜在的问题前面也已经解释过,对于长列表
这种应用场景还是应该用ListView.build
构造函数性能会更好。
2.2 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
的使用方法(公众号卡片的样式布局可以看这里,也算是对基础组件的一个巩固和复习):
代码(文件地址)
class SubscribeAccountList extends StatelessWidget {
const SubscribeAccountList({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Color(0xFFEFEFEF),
child: ListView.builder(
itemCount: subscribeAccountList.length,
itemBuilder: (context, index) {
return SubscribeAccountCard(data: subscribeAccountList[index]);
},
),
);
}
}
预览
根据上面的代码可以看到,ListView.build
创建列表最重要的两个参数就是itemCount
和itemBuilder
。对于公众号列表这个例子,由于每个公众号消息卡片的布局都是有规则的,而且这个列表的数量可能非常之多,所以用ListView.build
来创建再适合不过了。
2.3 ListView.separated()
绝大多数列表类的需求我们都可以用ListView.build
构造函数来解决问题,不过有的列表子项之间需要分割线
,此时我们可以用Flutter
提供的另一个构造函数ListView.separated
来创建列表。来看下其构造函数有什么不同:
ListView.separated({
…
@required IndexedWidgetBuilder separatorBuilder
})
相比于ListView.build
构造函数,可以看到ListView.separated
仅仅是多了一个separatorBuilder
必填参数。顾名思义,这就是暴露给调用方自定义分割线组件的回调方法。以支付宝的好友列表为例(好友卡片的样式布局可以看这里),我们来看下ListView.separated
的使用方法:
代码(文件地址)
class FriendList extends StatelessWidget {
const FriendList({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView.separated(
itemCount: friendListData.length,
itemBuilder: (context, index) {
return FriendCard(data: friendListData[index]);
},
separatorBuilder: (context, index) {
return Divider(
height: .5,
indent: 75,
color: Color(0xFFDDDDDD),
);
},
);
}
}
预览
看代码可以知道不同点就在于实现了separatorBuilder
这个函数,通过它我们可以自定义每个子元素之间的分割线了。
2.4 小结
到目前为止,我们一共学习了ListView
,ListView.build
和ListView.separated
三种创建列表的方式,它们各自都有其适用的场景,所以遇到需求时还是得具体问题具体分析。
不过,其实ListView
还有一个构造函数:ListView.custom
。而且ListView.build
和ListView.separated
最终都是通过ListView.custom
实现的。但是本文并不打算介绍这种方法,因为一般情况下前面提到的三种构造方法就已经足够解决问题了(以后遇到实际问题再研究这个)。
3. ListView进阶方法
上文我们介绍了ListView
的基础用法,但是在实际的产品中,我们还会遇到列表下拉刷新
和上拉加载
等需求。接下来,就让我们学习下Flutter
中应该如何实现此类交互操作。
3.1 下拉刷新
要在Flutter
中实现列表的下拉刷新效果,其实非常简单,因为Flutter
给我们封装好了一个RefreshIndicator
组件,使用起来也非常方便。看下示例代码:
class PullDownRefreshList extends StatefulWidget {
const PullDownRefreshList({Key key}) : super(key: key);
@override
_PullDownRefreshListState createState() => _PullDownRefreshListState();
}
class _PullDownRefreshListState extends State {
Future onRefresh() {
return Future.delayed(Duration(seconds: 1), () {
Toast.show(‘当前已是最新数据’, context);
});
}
@override
Widget build(BuildContext context) {
return RefreshIndicator(
onRefresh: this.onRefresh,
child: ListView.separated(
itemCount: friendListData.length,
itemBuilder: (context, index) {
return FriendCard(data: friendListData[index]);
},
separatorBuilder: (context, index) {
return Divider(
height: .5,
indent: 75,
color: Color(0xFFDDDDDD),
);
},
),
);
}
}
由于列表的数据源是可变的,因此这次的组件我们选用继承自StatefulWidget
。
可以看到RefreshIndicator
的用法十分简单,只要将我们原来的ListView
作为其child,并且实现其onRefresh
方法就好了。而onRefresh
方法其实是刷新完毕通知RefreshIndicator
的一个回调函数。上述代码中,我们模拟了一个1s的等待当做网络请求,然后弹出一个Toast提示"已经是最新数据"(此处的Toast
是安装了toast: ^0.1.3
这个包,Flutter
原生并没有提供)。
这里模仿了今日头条的列表UI作为示例(新闻卡片的样式布局可以看这里),我们来看下效果:
可以看到一切都如预期成功执行了,效果还是不错的,而且RefreshIndicator
使用起来也是非常简便。但是,由于Flutter
封装好的RefreshIndicator
组件可定制性有点弱,不太能够满足大多数app中自定义样式的要求。不过好在看了下RefreshIndicator
的源码并不是很多,等日后学了动画再回头来研究下如何定制一个自定义的下拉刷新组件。
3.2 上拉加载
除了下拉刷新之外,上拉加载是经常会遇到的另一种列表操作。不过,这次Flutter
倒是没有像下拉刷新那样提供现成的组件可以直接调用,上拉加载的交互需要我们自己完成。为此,我们先来简单分析下:
-
组件内部需要一个
list
变量存储当前列表的数据源; -
组件内部需要一个
bool
型的isLoading
标志位来表示当前是否处于Loading
状态; -
需要能够判断出当前列表是否已经滚动到底部,而这就要借助到我们前面提到过的
controller
属性了(ScrollController
可以获取到当前列表的滚动位置以及列表最大滚动区域,相比较即可得到结果); -
当开始加载数据的时候,需要将
isLoading
置为true
;当数据加载完毕的时候,需要将新的数据合并到list
变量中,并且重新将isLoading
置为false
。
根据上面的思路,我们可以得到下面的代码:
class PullUpLoadMoreList extends StatefulWidget {
const PullUpLoadMoreList({Key key}) : super(key: key);
@override
_PullUpLoadMoreListState createState() => _PullUpLoadMoreListState();
}
class _PullUpLoadMoreListState extends State {
bool isLoading = false;
ScrollController scrollController = ScrollController();
List list = List.from(newsList);
@override
void initState() {
最后
分享一份工作1到5年以上的Android程序员架构进阶学习路线体系,希望能对那些还在从事Android开发却还不知道如何去提升自己的,还处于迷茫的朋友!
-
阿里P7级Android架构师技术脑图;查漏补缺,体系化深入学习提升
-
**全套体系化高级架构视频;**七大主流技术模块,视频+源码+笔记
有任何问题,欢迎广大网友一起来交流
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!
scrollController = ScrollController();
List list = List.from(newsList);
@override
void initState() {
最后
分享一份工作1到5年以上的Android程序员架构进阶学习路线体系,希望能对那些还在从事Android开发却还不知道如何去提升自己的,还处于迷茫的朋友!
-
阿里P7级Android架构师技术脑图;查漏补缺,体系化深入学习提升
[外链图片转存中…(img-tZFaP4eF-1715046350932)]
-
**全套体系化高级架构视频;**七大主流技术模块,视频+源码+笔记
[外链图片转存中…(img-hhHMcZqS-1715046350933)]
有任何问题,欢迎广大网友一起来交流
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!