13 | 经典控件（二）：UITableView/ListView在Flutter中是什么？

陈航



该思维导图由 AI 生成，仅供参考

你好，我是陈航。
在上一篇文章中，我和你一起学习了文本、图片和按钮这 3 大经典组件在 Flutter 中的使用方法，以及如何在实际开发中根据不同的场景，去自定义展示样式。
文本、图片和按钮这些基本元素，需要进行排列组合，才能构成我们看到的 UI 视图。那么，当这些基本元素的排列布局超过屏幕显示尺寸（即超过一屏）时，我们就需要引入列表控件来展示视图的完整内容，并根据元素的多少进行自适应滚动展示。
这样的需求，在 Android 中是由 ListView 或 RecyclerView 实现的，在 iOS 中是用 UITableView 实现的；而在 Flutter 中，实现这种需求的则是列表控件 ListView。
ListView在 Flutter 中，ListView 可以沿一个方向（垂直或水平方向）来排列其所有子 Widget，因此常被用于需要展示一组连续视图元素的场景，比如通信录、优惠券、商家列表等。
我们先来看看 ListView 怎么用。ListView 提供了一个默认构造函数 ListView，我们可以通过设置它的 children 参数，很方便地将所有的子 Widget 包含到 ListView 中。
不过，这种创建方式要求提前将所有子 Widget 一次性创建好，而不是等到它们真正在屏幕上需要显示时才创建，所以有一个很明显的缺点，就是性能不好。因此，这种方式仅适用于列表中含有少量元素的场景。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

Flutter中的视图元素排列布局是通过ListView和CustomScrollView控件实现的。ListView可沿垂直或水平方向排列子Widget，适用于展示一组连续视图元素的场景。文章详细介绍了ListView的构造函数、builder构造函数以及设置分割线的方法，并提供了示例代码和效果展示。此外，文章还介绍了CustomScrollView控件，用于处理多个需要自定义滚动效果的Widget，通过一个滚动视差的例子演示了其使用方法。另外，文章还介绍了ScrollController和NotificationListener的使用方法，分别用于监听ListView的滚动信息和获取滚动事件通知。总的来说，本文通过实际示例和效果展示，帮助读者快速了解了Flutter中视图元素排列布局的实现方法，以及如何实现滚动信息的监听和控制。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Flutter 核心技术与实战》，新⼈⾸单¥59

立即购买

登录后留言

全部留言(42)

最新
精选

大土豆
我想问的最关键的一点是，flutter的列表有重用的概念吗？1000条数据，是会渲染出1000个视图对象还是像Androd或者iOS原生的那样重用机制，就渲染屏幕当中的的视图对象
作者回复: 后者
2019-07-27
3
11
arronK
1. cacheExtent 2. notification.metrics
作者回复: 赞👍
2019-12-12

6
季末灬离殇
double offsetY = scrollNotification.metrics.pixels; 滚动过程中通过偏移量更改isTop即可。
作者回复: 赞
2019-07-27
5
6
NASA
希望每节能配有小demo，毕竟每个人水平都不同
作者回复: 更新了github链接
2019-07-30
2
4
有妖气
老师，NestedScrollView中body是一个customScrollview。这个customScrollview中包含一个listview，那么怎么知道listview已经滑动到了底部，目前想在内部的listview中做一个上拉刷新的操作。
作者回复: 通过NotificationListener的metrics： NotificationListener<ScrollNotification>( onNotification: (ScrollNotification scrollInfo) { if (scrollInfo.metrics.pixels == scrollInfo.metrics.maxScrollExtent) { loadMore(); } }, child: ListView.builder( // ... ), ),
2019-09-08

3
许童童
老师你好，CustomScrollView 的sliver还是不是特别理解，可以再给点参考资料吗？
作者回复: 可以看看这个https://medium.com/@greg.perry/decode-customscrollview-d5a60fcfb9fb
2019-07-27
4
2
狗子不要喝奶茶
课后小作业的预加载：是否使用cacheExtent呢
作者回复: 赞
2019-10-29

1
咖啡凉了
_controller.addListener(() {// 为控制器注册滚动监听方法 if(_controller.offset > 1000) {// 如果 ListView 已经向下滚动了 1000，则启用 Top 按钮 setState(() {isToTop = true;}); } else if(_controller.offset < 300) {// 如果 ListView 向下滚动距离不足 300，则禁用 Top 按钮 setState(() {isToTop = false;}); } }); 这里的setstate在滚动中会一直重复调用吧，会不会影响性能呢
作者回复: 是会重复调用，因为Element与Renderboject会复用，所以整体渲染性能不受影响。但Widget确实会频繁重建，可以考虑在外层做一个简单判断，不重复设置。
2019-09-02

1
Dominic
有没有完整的代码放github上，后端程序表示片段代码，运行不起来
作者回复: 更新了github链接
2019-07-31
2
1
杨闯
你好，我们现在需要在debug的时候引用一些库，而在release的时候不引用一些库，而这个库使用了fmdb，因此有以下两个问题 1、在dart代码中，如何通过判断来决定要不要将import这个库和使用这个库的相关方法，而现在不能完成编译。 2、如果将这个库放到dev_dependencies里面，在编译release的时候，这个库没有被引入进来，但是fmdb被引入进来了，怎么避免fmdb给引用进来，是哪里出现问题了吗，还是哪里需要进行特别的设置
作者回复: 1.试试assert 2.你可以把这个库的所有依赖都完全展开，放到dev_dependencies中
2019-07-29
2
1

收起评论