ListView一个非常有用的控件，涉及到数据列表展示的，一般情况下都会用该控件，它可以沿一个方向线性排布所有子组件，并且它也支持基于Sliver的延迟构建模型。ListView的默认构造函数源码：
ListView({
...
//可滚动widget公共参数
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
EdgeInsetsGeometry padding,
//ListView各个构造函数的共同参数
double itemExtent,
bool shrinkWrap = false,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
double cacheExtent,
//子widget列表
List children = const [],
...
})
- itemExtent
该参数如果不为null，则会强制children的“长度”为itemExtent的值；这里的“长度”是指滚动方向上子组件的长度，也就是说如果滚动方向是垂直方向，则itemExtent代表子组件的高度；如果滚动方向为水平方向，则itemExtent就代表子组件的宽度。在ListView中，指定itemExtent比让子组件自己决定自身长度会更高效，这是因为指定itemExtent后，滚动系统可以提前知道列表的长度，而无需每次构建子组件时都去再计算一下，尤其是在滚动位置频繁变化时（滚动系统需要频繁去计算列表高度）。 - shrinkWrap
该属性表示是否根据子组件的总长度来设置ListView的长度，默认值为false 。默认情况下，ListView的会在滚动方向尽可能多的占用空间。当ListView在一个无边界(滚动方向上)的容器中时，shrinkWrap必须为true。 - addAutomaticKeepAlive
该属性表示是否将列表项（子组件）包裹在AutomaticKeepAlive 组件中；在一个懒加载列表中，如果将列表项包裹在AutomaticKeepAlive中，在该列表项滑出视口时它也不会被GC（垃圾回收），它会使用KeepAliveNotification来保存其状态。如果列表项自己维护其KeepAlive状态，那么此参数必须置为false。 - addRepaintBoundaries
该属性表示是否将列表项（子组件）包裹在RepaintBoundary组件中。当可滚动组件滚动时，将列表项包裹在RepaintBoundary中可以避免列表项重绘，但是当列表项重绘的开销非常小（如一个颜色块，或者一个较短的文本）时，不添加RepaintBoundary反而会更高效。和addAutomaticKeepAlive一样，如果列表项自己维护其KeepAlive状态，那么此参数必须置为false。
1. 默认构造函数
默认构造函数有一个children参数，它接受一个Widget列表（List）。这种方式适合只有少量的子组件的情况，因为默认构造函数构建的ListView没有应用基于Sliver的懒加载模型。这种方式需要将所有children都提前创建好，而不是等到子widget真正显示的时候再创建。代码示例：
class ListViewDefaultDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(8),
children: [
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
);
}
}
2. ListTile的使用
在开发中，我们经常见到一种列表，有一个图标或图片（Icon），有一个标题（Title），有一个子标题（Subtitle），还有尾部一个图标（Icon）。Flutter可以使用ListTile来实现。代码示例：
class ListTitleDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: [
ListTile(
// item前置图标
leading: Icon(Icons.people, size: 36),
// item标题
title: Text("联系人"),
// item副标题
subtitle: Text("联系人信息"),
// item后置图标
trailing: Icon(Icons.arrow_forward_ios),
),
ListTile(
leading: Icon(Icons.email, size: 36),
title: Text("邮箱"),
subtitle: Text("邮箱地址信息"),
trailing: Icon(Icons.arrow_forward_ios),
),
ListTile(
leading: Icon(Icons.message, size: 36),
title: Text("消息"),
subtitle: Text("消息详情信息"),
trailing: Icon(Icons.arrow_forward_ios),
),
ListTile(
leading: Icon(Icons.map, size: 36),
title: Text("地址"),
subtitle: Text("地址详情信息"),
trailing: Icon(Icons.arrow_forward_ios),
)
],
);
}
}
3. ListView.builder
ListView.builder适合列表项比较多（或者无限）的情况，因为只有当子组件真正显示的时候才会被创建，ListView.builder的核心参数：
ListView.builder({
// ListView公共参数已省略
...
@required IndexedWidgetBuilder itemBuilder,
int itemCount,
...
})
- itemBuilder
列表项创建的方法。当列表滚动到对应位置的时候，ListView会自动调用该方法来创建对应的子Widget。类型是IndexedWidgetBuilder，是一个函数类型。 - itemCount
表示列表项的数量，如果为空，则表示ListView为无限列表。
代码示例：
class ListViewBuilderDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 50,
itemExtent: 70.0, // 强制高度为70.0
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('title $index'),
leading: Icon(Icons.keyboard),
subtitle: Text('subtitle $index'),
trailing: Icon(Icons.keyboard_arrow_right),
// item内容边距
contentPadding: EdgeInsets.all(10.0),
);
},
);
}
}
4. ListView.separated
ListView.separated可以生成列表项之间的分割器，它比ListView.builder多了一个separatorBuilder参数，该参数是一个分割器生成器。代码示例：
class ListViewSeparatedDemo extends StatelessWidget {
final List entries = ['A', 'B', 'C'];
final List colorCodes = [600, 500, 100];
@override
Widget build(BuildContext context) {
return ListView.separated(
padding: const EdgeInsets.all(8),
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
color: Colors.amber[colorCodes[index]],
child: Center(child: Text('Entry ${entries[index]}')),
);
},
separatorBuilder: (BuildContext context, int index) => Divider(),
itemCount: entries.length,
);
}
}
5. ListView.custom
如果需要自定义列表项生成模型，可以通过ListView.custom来自定义，它需要实现一个SliverChildDelegate用来给ListView生成列表项组件。代码示例：
class ListViewCustom extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.custom(
childrenDelegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
height: 50.0,
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('list item $index'),
);
},
childCount: 10,
),
);
}
}
代码传送门