我们在实际开发中会创建显示不同类型内容的列表。以下是使用 Flutter 创建此类结构的方法:
1. 创建包含不同类型项目的数据源。
2. 将数据源转换为小部件列表。
创建包含不同类型项目的数据源
项目类型
要表示列表中不同类型的项目,请为每种类型的项目定义一个类。
abstract class ListItem {
Widget buildTitle(BuildContext context);
Widget buildSubTitle(BuildContext context);
}
class HeadingItem implements ListItem {
final String heading;
HeadingItem(this.heading);
@override
Widget buildTitle(BuildContext context) {
return Text(
heading,
style: Theme.of(context).textTheme.headlineSmall,
);
}
@override
Widget buildSubTitle(BuildContext context) {
return const SizedBox.shrink();
}
}
class MessageItem implements ListItem {
final String sender;
final String body;
MessageItem(this.sender, this.body);
@override
Widget buildTitle(BuildContext context) {
return Text(sender);
}
@override
Widget buildSubTitle(BuildContext context) {
return Text(body);
}
}
创建项目列表
大多数情况下,会从互联网或本地数据库获取数据,然后将该数据转换为项目列表。
final items = List<ListItem>.generate(1000, (i) =>
i % 6 == 0 ? HeadingItem('Heading $i') : MessageItem(
'Sender $i', 'Message body $i'));
要将每个项目转换为小部件,请使用 ListView.builder() 构造函数。
通常,提供一个构建器函数来检查您正在处理的项目类型,并返回适合该项目类型的小部件。
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
final item = items[index];
return ListTile(
title: item.buildTitle(context),
subtitle: item.buildSubTitle(context),
);
},
itemCount: items.length),