ListView组件怎样实现分组显示

在Flutter中，要实现ListView组件的分组显示，你可以使用ExpansionTile组件。ExpansionTile组件允许你创建一个可展开的列表项，当你点击它时，它会展开并显示更多的信息。以下是一个简单的示例，展示了如何使用ExpansionTile组件实现分组显示：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ListView 分组显示')),
        body: MyListView(),
      ),
    );
  }
}

class MyListView extends StatelessWidget {
  final List<Map<String, String>> data = [
    {'title': 'Group 1', 'content': 'Item 1'},
    {'title': 'Group 1', 'content': 'Item 2'},
    {'title': 'Group 1', 'content': 'Item 3'},
    {'title': 'Group 2', 'content': 'Item 4'},
    {'title': 'Group 2', 'content': 'Item 5'},
    {'title': 'Group 2', 'content': 'Item 6'},
  ];

  @override
  Widget build(BuildContext context) {
    Map<String, List<Map<String, String>>> groupedData = data.groupBy((item) => item['title']);

    return ListView.builder(
      itemCount: groupedData.length,
      itemBuilder: (context, index) {
        String groupTitle = groupedData.keys.elementAt(index);
        List<Map<String, String>> groupItems = groupedData[groupTitle];

        return ExpansionTile(
          title: Text(groupTitle),
          children: groupItems.map((item) {
            return ListTile(
              title: Text(item['content']),
            );
          }).toList(),
        );
      },
    );
  }
}

在这个示例中，我们首先将数据按照标题进行分组，然后使用ListView.builder构建一个列表。对于每个分组，我们创建一个ExpansionTile组件，并将其标题设置为分组的标题。接着，我们将分组中的每个项目添加到ExpansionTile的children属性中，使用ListTile组件显示项目内容。

当你运行这个示例时，你会看到一个可滚动的列表，其中包含两个分组。点击每个分组的标题，它会展开并显示该分组中的所有项目。