Flutter Dart动态嵌套Widget问题：子组添加同步异常求助

完全可以通过Dart的Map来实现需求，核心是给每个组维护独立的子组列表，避免操作时影响所有组。以下是具体实现思路和代码示例：

1. 定义核心数据结构 #

用List<Map<String, dynamic>>存储所有组，每个Map包含唯一标识id和该组专属的子组列表subGroups，确保每个组的数据相互独立：

List<Map<String, dynamic>> groups = [
  {
    'id': 'group_1',
    'subGroups': [{'id': 'sub_1'}] // 初始子组
  }
];

2. 构建嵌套UI #

通过ListView.builder渲染所有组，每个组内单独处理子组的添加和删除操作，绑定当前组的上下文：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('嵌套组示例')),
    body: Column(
      children: [
        // 添加组按钮
        ElevatedButton(
          onPressed: () => setState(() {
            groups.add({
              'id': 'group_${groups.length + 1}',
              'subGroups': [{'id': 'sub_1'}] // 新组默认带一个子组
            });
          }),
          child: const Text('添加组'),
        ),
        // 渲染所有组
        Expanded(
          child: ListView.builder(
            itemCount: groups.length,
            itemBuilder: (context, groupIndex) {
              final currentGroup = groups[groupIndex];
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 组头部（名称+添加子组按钮）
                    Row(
                      children: [
                        Text('组 ${groupIndex + 1}'),
                        const SizedBox(width: 10),
                        ElevatedButton(
                          onPressed: () => setState(() {
                            // 仅给当前组添加子组
                            currentGroup['subGroups'].add({
                              'id': 'sub_${currentGroup['subGroups'].length + 1}'
                            });
                          }),
                          child: const Text('添加子组'),
                        ),
                      ],
                    ),
                    // 渲染当前组的子组
                    ...(currentGroup['subGroups'] as List).map((subGroup) {
                      return Row(
                        children: [
                          Text('  子组 ${subGroup['id']}'),
                          const SizedBox(width: 10),
                          IconButton(
                            onPressed: () => setState(() {
                              // 仅删除当前组的指定子组
                              currentGroup['subGroups'].remove(subGroup);
                            }),
                            icon: const Icon(Icons.delete, color: Colors.red),
                          ),
                        ],
                      );
                    }).toList(),
                  ],
                ),
              );
            },
          ),
        ),
      ],
    ),
  );
}

3. 问题根源说明 #

你之前遇到的“点击添加子组给所有组加”的问题，本质是所有组共享了同一个子组列表实例，或者没有为每个组维护独立的数据集合。用Map为每个组单独存储subGroups后，操作只会影响目标组的子组列表，不会扩散到其他组。

进阶优化：用自定义类替代Map #

虽然Map可以实现需求，但用自定义类能获得更严格的类型检查，避免类型转换错误，代码可读性也更高：

class Group {
  final String id;
  List<SubGroup> subGroups;

  Group({required this.id, required this.subGroups});
}

class SubGroup {
  final String id;

  SubGroup({required this.id});
}

// 初始化数据
List<Group> groups = [
  Group(id: 'group_1', subGroups: [SubGroup(id: 'sub_1')])
];

后续的UI构建逻辑和Map版本一致，只是访问属性时用.替代[]，比如currentGroup.subGroups。

内容的提问来源于stack exchange，提问作者Sulaxan