建立包含不同型別專案的列表

你可能需要建立顯示不同型別內容的列表。例如，你可能正在開發一個列表，其中顯示一個標題，隨後是與該標題相關的一些條目，接著又是另一個標題，依此類推。

以下是在 Flutter 中建立此類結構的方法：

1. 建立一個包含不同型別條目的資料來源。
2. 將資料來源轉換為元件（widgets）列表。

為了在列表中表示不同型別的條目，請為每種型別的條目定義一個類。

在此示例中，建立一個顯示標題後跟五條訊息的應用。因此，需要建立三個類：ListItem、HeadingItem 和 MessageItem。

/// The base class for the different types of items the list can contain.
abstract class ListItem {
  /// The title line to show in a list item.
  Widget buildTitle(BuildContext context);
​
  /// The subtitle line, if any, to show in a list item.
  Widget buildSubtitle(BuildContext context);
}
​
/// A ListItem that contains data to display a heading.
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();
}
​
/// A ListItem that contains data to display a message.
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(
  // Let the ListView know how many items it needs to build.
  itemCount: items.length,
  // Provide a builder function. This is where the magic happens.
  // Convert each item into a widget based on the type of item it is.
  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 = 'Mixed List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(title: const Text(title)),
        body: ListView.builder(
          // Let the ListView know how many items it needs to build.
          itemCount: items.length,
          // Provide a builder function. This is where the magic happens.
          // Convert each item into a widget based on the type of item it is.
          itemBuilder: (context, index) {
            final item = items[index];

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

/// The base class for the different types of items the list can contain.
abstract class ListItem {
  /// The title line to show in a list item.
  Widget buildTitle(BuildContext context);

  /// The subtitle line, if any, to show in a list item.
  Widget buildSubtitle(BuildContext context);
}

/// A ListItem that contains data to display a heading.
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();
}

/// A ListItem that contains data to display a message.
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);
}