【Flutter 专题】123 图解简易 GroupList 二级分组列表

在Flutter中，可以使用Expanded和ListView来创建一个二级分组列表，如下是一个简单的示例代码：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: GroupList(),
        ),
      ),
    );
  }
}
 
class GroupList extends StatelessWidget {
  final List<Group> groups = [
    Group(
      header: 'Group A',
      items: ['Item 1', 'Item 2', 'Item 3'],
    ),
    Group(
      header: 'Group B',
      items: ['Item 4', 'Item 5', 'Item 6'],
    ),
    // ...可以添加更多的组...
  ];
 
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: groups.length,
      itemBuilder: (context, index) {
        final group = groups[index];
        return Column(
          children: <Widget>[
            ListTile(
              title: Text(group.header),
            ),
            for (var item in group.items)
              ListTile(
                title: Text(item),
              ),
          ],
        );
      },
    );
  }
}
 
class Group {
  final String header;
  final List<String> items;
 
  Group({this.header, this.items});
}

这段代码定义了一个简单的GroupList类，它包含了一个groups列表。GroupList类覆盖了build方法，使用ListView.builder来创建一个带有二级分组的列表。每个分组的头部是一个ListTile，紧跟着是该组下的各个项目，也是ListTile。这样就形成了一个二级分组列表。