Flutter - 当父状态更改时如何更改子控件的状态？

Question

我是 Flutter 新手，我一直在尝试在我的应用程序中创建一个简单的实用程序，其中有一些输入字段在单击“编辑”按钮之前被禁用。单击后，所有字段都变为可编辑。

单击“编辑”按钮时，它会显示其他小部件。有一个“添加”按钮，可将设备小部件（子）添加到父小部件。

我在单击“编辑”按钮时更新

_isEditing

变量的值，但它并没有更改我通过构造函数传递的子变量的状态。我很难理解这一点。请帮帮我，我怎样才能更新子类的状态？

这里是Parent类的代码

class Parent extends StatefulWidget {
  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
          ),
        ),
      ],
    );
  }
}

我将不胜感激任何帮助。谢谢！

更新 我已经添加了我想要实现的目标的图片。

非编辑模式

编辑模式

当我单击“编辑”按钮时，我想将所有字段更改为可编辑。添加按钮添加作为子项创建的设备行的另一行。单击“保存”按钮后，所有字段都应恢复为不可编辑状态。

Answer 1

我试图理解，但我认为这是你想要的行为：

您有一个小部件列表：

List<Child>

，主要在每个元素中封装了

isEditable

标志。

并且您正在尝试更新父类的实例变量：

  bool _isEditing = false; 

_isEditing = !_isEditing; // in your setState

好的，完成上述操作后你猜怎么着：设备列表仍然相同

您需要手动更改每个元素的

isEditing

值。

  devices.forEach((child){
    
    child.isEditing =  _isEditing;
  }); 

可以在

setState()

内更改它们，但是要小心，因为

Child

类没有为

isEditing

变量提供设置器您将其标记为final。

删除最后一个，这样它就变得可变了。

希望对您有帮助。