ListView的4种构造方式
默认构造函数（传入 List children）
ListView(
children: [
ListTile(title: Text("普通ListView")),
ListTile(
title: Text("ListView.build"),
onTap: () {
Navigator.pushNamed(context, '/listview_build');
}),
],
)
复制代码 适用场景：已知有限个Item的情况下
builder
ListView.builder(
itemBuilder: (context, index) => Text("Item $index"),
itemCount: 100)
复制代码适用场景：长列表时采用builder模式，能提高性能。不是把所有子控件都构造出来，而是在控件viewport加上头尾的cacheExtent这个范围内的子Item才会被构造。在构造时传递一个builder，按需加载是一个惯用模式，能提高加载性能。
构造多种样式的Item
abstract class ListItem {}
class HeadingItem implements ListItem {
final String heading;
HeadingItem(this.heading);
}
class MessageItem implements ListItem {
final String sender;
final String body;
MessageItem(this.sender, this.body);
}
ListView.builder(
itemBuilder: (context, index) {
final item = items[index];
if (item is HeadingItem) {
return ListTile(
title: Text(
item.heading,
style: Theme.of(context).textTheme.headline,
),
);
} else if (item is MessageItem) {
return ListTile(
title: Text(item.sender),
subtitle: Text(item.body),
);
}
},
itemCount: items.length))
复制代码separated
ListView.separated(
itemBuilder: (context, index) {
return Text("Item $index");
},
separatorBuilder: (context, index) {
return Container(
color: Colors.grey,
height: 3,
);
},
itemCount: 100)
复制代码适用场景：列表中需要分割线时，可以自定义复杂的分割线
custom
需要自定义SliverChildDelegate，各方法含义如下：
ListView.custom(childrenDelegate: CustomSliverChildDelegate())
class CustomSliverChildDelegate extends SliverChildDelegate {
/// 根据index构造child
@override
Widget build(BuildContext context, int index) {
// KeepAlive将把所有子控件加入到cache，已输入的TextField文字不会因滚动消失
// 仅用于演示
return KeepAlive(
keepAlive: true,
child: TextField(decoration: InputDecoration(hintText: '请输入')));
}
/// 决定提供新的childDelegate时是否需要重新build。在调用此方法前会做类型检查，不同类型时才会调用此方法，所以一般返回true。
@override
bool shouldRebuild(SliverChildDelegate oldDelegate) {
return true;
}
/// 提高children的count，当无法精确知道时返回null。
/// 当 build 返回 null时，它也将需要返回一个非null值
@override
int get estimatedChildCount => 100;
/// 预计最大可滑动高度，如果设置的过小会导致部分child不可见，设置报错
@override
double estimateMaxScrollOffset(int firstIndex, int lastIndex,
double leadingScrollOffset, double trailingScrollOffset) {
return 2500;
}
/// 完成layout后的回调，可以通过该方法获已完成布局的视图树包括哪些子控件
@override
void didFinishLayout(int firstIndex, int lastIndex) {
print('didFinishLayout firstIndex=$firstIndex firstIndex=$lastIndex');
}
}
复制代码适用场景：上面几种模式基本可以满足业务需求，如果你还想做一些其它设置（如列表的最大滚动范围）或获取滑动时每次布局的子Item范围，可以尝试custom模式
ListView属性含义
ListView的属性
- itemExtent: 指定Item在滑动方向上的高度，用来提高滑动性能
继承自父控件 BoxScrollView 的属性
- padding: 用来设置BoxScrollView中子控件与父控件的间距
继承自 ScrollView 的属性
- ScrollDirection: 滚动方向
- reverse：决定滚动方向是否与阅读方向一致
- scrollController：控制滚动的位置
- primary：当内容不足以滚动时，是否支持滚动；对于iOS系统还有一个效果：当用户点击状态栏时是否滑动到顶部。
- ScrollPhysics：控制用户滚动视图的交互
- AlwaysScrollableScrollPhysics:列表总是可滚动的。在iOS上会有回弹效果，在android上不会回弹。那么问题来了，如果primary设置为false（内容不足时不滚动），且 physics设置为AlwaysScrollableScrollPhysics，列表是否可以滑动？答案是可以，感兴趣的可以试一下
- PageScrollPhysics：一般是给PageView控件用的滑动效果。如果listview设置的话在滑动到末尾时会有个比较大的弹起和回弹
- ClampingScrollPhysics：滚动时没有回弹效果，同android系统的listview效果
- NeverScrollableScrollPhysics：就算内容超过列表范围也不会滑动
- BouncingScrollPhysics：不论什么平台都会有回弹效果
- FixedExtentScrollPhysics：不适用于ListView，原因：需要指定scroller为FixedExtentScrollController,这个scroller只能用于ListWheelScrollViews
- shrinkWrap: scroll view在滑动方向上的高度是否由内容高度决定，false：则高度为滑动方向上的最大允许高度；如果在滑动方向上没有设置约束，则这个字段必须设置为true，否则会报错。
- cacheExtent：可见区域的前后会有一定高度的空间去缓存子控件，当滑动时就可以迅速呈现
- semanticChildCount：有含义的子控件的数量，如ListView会用children的长度，ListView.separated会用children长度的一半
用于构造SliverChildListDelegate的属性
- addAutomaticKeepAlives：是否将子控件包裹在AutomaticKeepAlive控件内
- addRepaintBoundaries：true：是否将子控件包裹在 RepaintBoundary 控件内。用于避免列表滚动时的重绘，如果子控件重绘开销很小时，比如子控件就是个色块或简短的文字，把这个字段设置为false性能会更好
- addSemanticIndexes：是否把子控件包装在IndexedSemantics里，用来提供无障碍语义
最后
ListView最为app最常见的控件之一，掌握它的用法非常重要。本文主要给Flutter萌新们介绍ListView的几种构造方式和参数含义，视图控件的学习应多动手写写demo，真实体会各个参数的效果。
最后附上demo以供参考。
@akindone， 本文版权属于再惠研发团队，欢迎转载，转载请保留出处。