Flutter：父组件状态变更时如何同步更新子组件状态？

我是Flutter新手，正在开发一个功能：

• 非编辑模式：输入框默认禁用，无「+ Add」按钮
• 编辑模式：点击「Edit」按钮后所有输入框变为可编辑，显示「+ Add」按钮，点击可添加新的设备行；点击「Save」按钮后，所有输入框恢复禁用状态

目前点击Edit按钮时，父组件的_isEditing变量已更新，但通过构造函数传递给子组件的状态并未同步变更，请求帮助实现父组件状态变更时同步更新子组件状态。

父组件原代码 #

class Parent extends Stateful Widget {
  final int index;
  const Parent({super.key, required this.index});

  @override
  State<Parent> createState() => _ParentState();
}

class _ParentState extends State<ParentBox> {
  bool _isEditing = false;
  List _devices = [];

  @override
  void initState() {
    super.initState();
    _devices.add(Child(isEditing: _isEditing, index: 0));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Container(
            child: Column(
              children: [
                formField(
                  "Location:",
                  TextEditingController(),
                  hint: "Enter location",
                  small: true,
                  required: false,
                  labelSize: 16,
                  disabled: !_isEditing
                ),
                SizedBox(height: 10),
                ..._devices,
                SizedBox(height: 10,),
                _isEditing
                  ? Align(
                      child: SizedBox(
                        height: 30,
                        child: generalButton("+ Add", onPressed: (){
                          setState(() {
                            _devices.add(Child(isEditing: _isEditing, index: _devices.length - 1));
                          });
                        }),
                      )
                    )
                  : Container(),
                SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    InkWell(
                      onTap: () {
                        showAlertDialog(
                          context,
                          "Alert",
                          "Alert text"
                          onYesPressed: () {
                            
                          },
                        );
                      },
                      child: Icon(
                        Icons.delete_outline_rounded,
                        color: Colors.red,
                      ),
                    ),
                    _isEditing
                      ? generalButton("Save", onPressed: () {
                          setState(() {
                            _isEditing = !_isEditing;
                          });
                        })
                      : generalButton("Edit", onPressed: () {
                          setState(() {
                            _isEditing = !_isEditing;

                          });
                        })
                  ],
                ),
              ],
            ),
          ),
          SizedBox(height: 30),
        ],
      ),
    );
  }
}

子组件原代码 #

class Child extends StatelessWidget {
  final bool isEditing;
  final int index;
  const Child({super.key, required this.isEditing, required this.index});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        SizedBox(
          width: MediaQuery.of(context).size.width * 0.4,
          child: formField(
            "Device:",
            TextEditingController(),
            small: true,
            required: false,
            labelSize: 16,
            disabled: !isEditing
          ),
        ),
        SizedBox(
          width: MediaQuery.of(context).size.width * 0.4,
          child: formField(
            "Expiration Date:",
            TextEditingController(),
            small: true,
            required: false,
            labelSize: 16,
            disabled: !isEditing
          ),
        ),
      ],
    );
  }
}

解决方案 #

问题根源 #

你直接将Child组件实例存入_devices列表，当父组件_isEditing变更调用setState时，列表中的Child实例还是创建时传入的旧isEditing值，不会自动更新。

修复步骤 #

1. 存储数据而非Widget实例：不在_devices里存Child组件，改为存储设备的基础数据（如控制器、索引），在build方法中动态生成子组件，确保每次重建都用最新的_isEditing值。
2. 保留输入内容：将TextEditingController绑定到数据模型中，避免每次重建组件丢失输入内容，同时在组件销毁时清理控制器防止内存泄漏。
3. 修正父组件类名错误：原代码中State<ParentBox>应为State<Parent>。

修正后的代码 #

父组件代码

class Parent extends StatefulWidget {
  final int index;
  const Parent({super.key, required this.index});

  @override
  State<Parent> createState() => _ParentState();
}

class _ParentState extends State<Parent> {
  bool _isEditing = false;
  // 存储设备数据，包含输入控制器和索引
  List<Map<String, dynamic>> _devices = [];

  @override
  void initState() {
    super.initState();
    // 添加初始设备数据
    _devices.add({
      'index': 0,
      'deviceController': TextEditingController(),
      'expirationController': TextEditingController(),
    });
  }

  @override
  void dispose() {
    // 销毁所有控制器，避免内存泄漏
    for (var device in _devices) {
      (device['deviceController'] as TextEditingController).dispose();
      (device['expirationController'] as TextEditingController).dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Container(
            child: Column(
              children: [
                formField(
                  "Location:",
                  TextEditingController(),
                  hint: "Enter location",
                  small: true,
                  required: false,
                  labelSize: 16,
                  disabled: !_isEditing
                ),
                const SizedBox(height: 10),
                // 动态生成Child组件，传入最新的_isEditing
                ..._devices.map((device) => Child(
                      isEditing: _isEditing,
                      index: device['index'],
                      deviceController: device['deviceController'],
                      expirationController: device['expirationController'],
                    )).toList(),
                const SizedBox(height: 10),
                _isEditing
                    ? Align(
                        child: SizedBox(
                          height: 30,
                          child: generalButton("+ Add", onPressed: () {
                            setState(() {
                              _devices.add({
                                'index': _devices.length,
                                'deviceController': TextEditingController(),
                                'expirationController': TextEditingController(),
                              });
                            });
                          }),
                        ),
                      )
                    : Container(),
                const SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    InkWell(
                      onTap: () {
                        showAlertDialog(
                          context,
                          "Alert",
                          "Alert text",
                          onYesPressed: () {},
                        );
                      },
                      child: const Icon(
                        Icons.delete_outline_rounded,
                        color: Colors.red,
                      ),
                    ),
                    _isEditing
                        ? generalButton("Save", onPressed: () {
                            setState(() {
                              _isEditing = !_isEditing;
                            });
                          })
                        : generalButton("Edit", onPressed: () {
                            setState(() {
                              _isEditing = !_isEditing;
                            });
                          })
                  ],
                ),
              ],
            ),
          ),
          const SizedBox(height: 30),
        ],
      ),
    );
  }
}

子组件代码

class Child extends StatelessWidget {
  final bool isEditing;
  final int index;
  final TextEditingController deviceController;
  final TextEditingController expirationController;

  const Child({
    super.key,
    required this.isEditing,
    required this.index,
    required this.deviceController,
    required this.expirationController,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        SizedBox(
          width: MediaQuery.of(context).size.width * 0.4,
          child: formField(
            "Device:",
            deviceController,
            small: true,
            required: false,
            labelSize: 16,
            disabled: !isEditing,
          ),
        ),
        SizedBox(
          width: MediaQuery.of(context).size.width * 0.4,
          child: formField(
            "Expiration Date:",
            expirationController,
            small: true,
            required: false,
            labelSize: 16,
            disabled: !isEditing,
          ),
        ),
      ],
    );
  }
}

关键说明 #

• 父组件不再存储Child实例，而是存储数据模型，每次build都会用最新的_isEditing生成子组件，确保状态同步。
• 输入控制器与数据绑定，避免重建组件时丢失输入内容，同时在dispose中清理控制器，防止内存泄漏。

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