创建包含不同类型项的列表

您可能需要创建显示不同类型内容的列表。例如，您可能正在处理一个列表，该列表显示一个标题，然后是与该标题相关的几个项目，然后是另一个标题，依此类推。

以下是使用 Flutter 创建此类结构的方法：

1. 创建一个包含不同类型项的数据源。
2. 将数据源转换为小部件列表。

要表示列表中不同类型的项目，请为每种类型的项目定义一个类。

在此示例中，创建一个显示标题后跟五个消息的应用程序。因此，创建三个类：ListItem、HeadingItem 和 MessageItem。

/// 列表可以包含的不同类型项目的基类。
abstract class ListItem {
  /// 在列表项中显示的标题行。
  Widget buildTitle(BuildContext context);

  /// 列表项中显示的副标题行（如有）。
  Widget buildSubtitle(BuildContext context);
}

/// 包含显示标题的数据的 ListItem。
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) => const SizedBox.shrink();
}

/// 包含显示消息的数据的 ListItem。
class MessageItem implements ListItem {
  final String sender;
  final String body;

  MessageItem(this.sender, this.body);

  @override
  Widget buildTitle(BuildContext context) => Text(sender);

  @override
  Widget buildSubtitle(BuildContext context) => Text(body);
}

大多数情况下，您会从互联网或本地数据库中获取数据，并将这些数据转换为项目列表。

对于此示例，生成一个要使用的项目列表。该列表包含一个标题后跟五个消息。每条消息都有三种类型之一：ListItem、HeadingItem 或 MessageItem。

final items = List<ListItem>.generate(
  1000,
  (i) => i % 6 == 0
      ? HeadingItem('Heading $i')
      : MessageItem('Sender $i', 'Message body $i'),
);

要将每个项目转换为小部件，请使用 ListView.builder() 构造函数。

通常，提供一个构建器函数，该函数检查您正在处理的项目类型，并返回该类型项目的适当小部件。

ListView.builder(
  // 让 ListView 知道它需要构建多少个项目。
  itemCount: items.length,
  // 提供一个构建器函数。这就是神奇发生的地方。
  // 根据项目的类型将每个项目转换为小部件。
  itemBuilder: (context, index) {
    final item = items[index];

    return ListTile(
      title: item.buildTitle(context),
      subtitle: item.buildSubtitle(context),
    );
  },
)

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(
      items: List<ListItem>.generate(
        1000,
        (i) => i % 6 == 0
            ? HeadingItem('Heading $i')
            : MessageItem('Sender $i', 'Message body $i'),
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  final List<ListItem> items;

  const MyApp({super.key, required this.items});

  @override
  Widget build(BuildContext context) {
    const title = '混合列表';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          // 让 ListView 知道它需要构建多少个项目。
          itemCount: items.length,
          // 提供一个构建器函数。这就是神奇发生的地方。
          // 根据项目的类型将每个项目转换为小部件。
          itemBuilder: (context, index) {
            final item = items[index];

            return ListTile(
              title: item.buildTitle(context),
              subtitle: item.buildSubtitle(context),
            );
          },
        ),
      ),
    );
  }
}

/// 列表可以包含的不同类型项目的基类。
abstract class ListItem {
  /// 在列表项中显示的标题行。
  Widget buildTitle(BuildContext context);

  /// 列表项中显示的副标题行（如有）。
  Widget buildSubtitle(BuildContext context);
}

/// 包含显示标题的数据的 ListItem。
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) => const SizedBox.shrink();
}

/// 包含显示消息的数据的 ListItem。
class MessageItem implements ListItem {
  final String sender;
  final String body;

  MessageItem(this.sender, this.body);

  @override
  Widget buildTitle(BuildContext context) => Text(sender);

  @override
  Widget buildSubtitle(BuildContext context) => Text(body);
}

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。