Flutter动态添加Widget不显示问题求助（需同类管理列表）

问题原因 #

你的代码中，group()函数里的fields是局部变量，每次调用setState触发组件重建时，group()会重新执行，fields会被重新初始化为空列表——这就导致之前添加的子组件全部丢失，即使你在按钮点击时修改了局部的fields，下次UI重建时也会被重置，所以子组件无法显示。

修改后的完整代码 #

import 'package:flutter/material.dart';

class GroupDemo extends StatefulWidget {
  const GroupDemo({super.key});

  @override
  State<GroupDemo> createState() => _GroupDemoState();
}

class _GroupDemoState extends State<GroupDemo> {
  // 存储所有组组件
  List<Widget> groups = [];
  // 存储每个组对应的子组件列表，与groups索引一一对应
  List<List<Widget>> groupFields = [];

  Widget group(int index) {
    return Container(
      color: Colors.blue,
      width: 500,
      height: 500,
      margin: const EdgeInsets.all(10),
      child: Column(
        children: [
          // 显示当前组的子组件
          Column(
            children: groupFields[index],
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                // 给对应索引的组添加子组件
                groupFields[index].add(const Field());
                print(groupFields[index].length);
              });
            },
            child: const Text('添加子组件'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 显示所有组
          Column(
            children: groups,
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                // 先添加一个空的子组件列表，再添加对应的组
                groupFields.add([]);
                groups.add(group(groups.length));
              });
            },
            child: const Text('添加组'),
          ),
        ],
      ),
    );
  }
}

// 子组件封装为独立的无状态组件
class Field extends StatelessWidget {
  const Field({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      width: 100,
      height: 50,
      margin: const EdgeInsets.symmetric(vertical: 5),
    );
  }
}

关键改动说明 #

• 将每个组的子组件列表从group()内的局部变量，改为类成员变量groupFields，用列表嵌套的方式存储每个组对应的子组件集合，确保UI重建时不会丢失已添加的子组件。
• group()函数新增索引参数，用来关联groupFields中对应的子列表，保证每个组的添加按钮只操作自己的子组件集合。
• 将field函数封装为独立的Field无状态组件，让代码结构更清晰，避免不必要的参数传递。

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