Flutter 更新子时避免更新父变量

发布于04月11日

我在更新变量时遇到问题，因为它也会影响其父变量.我试图从子项中删除列表项，但它也会删除父项数据.

这是我的密码

Future<void> ChangeSubCategory({required String value}) async {
    if (this.mounted) {
      setState(() {
        if (!_subCategory.contains(value)) {
          if (value == 'all') {
            _subCategory = _categoryOutput[_category]; => set _subCategory from parent List
          } else {
            _subCategory.add(value);
          }
        } else if (_subCategory.contains(value)) {
          _subCategory.remove(value); => When doing this one, the parent _categoryOutput also affected
        }
        UpdateFilter();
      });
    }
  }

如果我们想从父级复制变量，最安全的方法是什么？因为在flatter中，当我们更新子变量时，它也会更新父变量.非常感谢.

推荐答案

你的问题是更新所有子部件的父部件的整个状态，为了避免这种情况，你可以使用StatefulBuilder只更新你想要的子部件！

如下例所示，即使所有三个复选框都会更改变量isChecked，但只有第一个复选框可以刷新整个状态，这会刷新所有三个复选框，而第二个和第三个复选框只能在使用StatefulBuilder时刷新其状态:

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isChecked = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Example'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Refresh all the checkboxes'),
                Checkbox(
                  value: isChecked,
                  onChanged: (value) {
                    setState(() {
                      isChecked = !isChecked;
                    });
                  },
                ),
                Divider(),
                Text('Refresh only this checkbox'),
                StatefulBuilder(
                  builder: (context, setState) => Checkbox(
                    value: isChecked,
                    onChanged: (value) {
                      setState(() {
                        isChecked = !isChecked;
                      });
                    },
                  ),
                ),
                Divider(),
                Text('Refresh only this checkbox'),
                StatefulBuilder(
                  builder: (context, setState) => Checkbox(
                    value: isChecked,
                    onChanged: (value) {
                      setState(() {
                        isChecked = !isChecked;
                      });
                    },
                  ),
                ),
              ],
            ),
          )),
    );
  }
}