Flutter PopupMenu中点击全选复选框如何实时同步所有复选框状态？

PopupMenu 的内容是在独立的 Overlay 层中渲染的，它的 widget 树和主页面的状态上下文相互分离。当你在主页面状态类中更新复选框选中状态时，PopupMenu 的 itemBuilder 不会自动重新执行，导致菜单内的复选框无法实时刷新状态——只有关闭菜单重新打开时，才会重新构建菜单内容并显示最新状态。

下面提供两种可行的修复方案，你可以根据自己的代码结构选择：

方案一：用 StatefulBuilder 实现局部刷新 #

通过 StatefulBuilder 包裹 PopupMenu 的内容，在状态变化时调用其内部的 setState 方法，强制刷新菜单内的 UI：

class _MyHomePageState extends State<MyHomePage> {
  List<String> items = ['Item 1', 'Item 2', 'Item 3'];
  Set<String> selectedItems = {};
  bool selectAll = false;

  void toggleSelectAll() {
    setState(() {
      selectAll = !selectAll;
      selectedItems = selectAll ? Set.from(items) : {};
    });
  }

  void toggleItem(String item) {
    setState(() {
      selectedItems.contains(item) ? selectedItems.remove(item) : selectedItems.add(item);
      selectAll = selectedItems.length == items.length;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PopupMenu 复选框修复'),
        actions: [
          PopupMenuButton(
            itemBuilder: (context) {
              // 用 StatefulBuilder 包裹整个菜单内容
              return StatefulBuilder(
                builder: (menuContext, setStateMenu) {
                  return [
                    PopupMenuItem(
                      child: Row(
                        children: [
                          Checkbox(
                            value: selectAll,
                            onChanged: (_) {
                              toggleSelectAll();
                              // 刷新菜单内部 UI
                              setStateMenu(() {});
                            },
                          ),
                          const Text('(All)'),
                        ],
                      ),
                    ),
                    ...items.map((item) => PopupMenuItem(
                      child: Row(
                        children: [
                          Checkbox(
                            value: selectedItems.contains(item),
                            onChanged: (_) {
                              toggleItem(item);
                              setStateMenu(() {});
                            },
                          ),
                          Text(item),
                        ],
                      ),
                    )),
                  ];
                },
              );
            },
          ),
        ],
      ),
      body: Center(
        child: Text('已选中：${selectedItems.join(', ')}'),
      ),
    );
  }
}

方案二：用 ValueNotifier 实现状态监听 #

通过 ValueNotifier 管理选中状态，配合 ValueListenableBuilder 监听状态变化，自动更新菜单内的复选框 UI，这种方式更符合 Flutter 状态管理的最佳实践：

class _MyHomePageState extends State<MyHomePage> {
  List<String> items = ['Item 1', 'Item 2', 'Item 3'];
  final ValueNotifier<Set<String>> selectedItemsNotifier = ValueNotifier({});
  final ValueNotifier<bool> selectAllNotifier = ValueNotifier(false);

  @override
  void initState() {
    super.initState();
    // 监听选中项变化，自动更新全选状态
    selectedItemsNotifier.addListener(() {
      selectAllNotifier.value = selectedItemsNotifier.value.length == items.length;
    });
  }

  void toggleSelectAll() {
    selectedItemsNotifier.value = selectAllNotifier.value ? {} : Set.from(items);
  }

  void toggleItem(String item) {
    final current = Set.from(selectedItemsNotifier.value);
    selectedItemsNotifier.value = current.contains(item) ? current..remove(item) : current..add(item);
  }

  @override
  void dispose() {
    selectedItemsNotifier.dispose();
    selectAllNotifier.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PopupMenu 复选框修复'),
        actions: [
          PopupMenuButton(
            itemBuilder: (context) {
              return [
                PopupMenuItem(
                  child: ValueListenableBuilder<bool>(
                    valueListenable: selectAllNotifier,
                    builder: (_, isAllSelected, __) {
                      return Row(
                        children: [
                          Checkbox(
                            value: isAllSelected,
                            onChanged: (_) => toggleSelectAll(),
                          ),
                          const Text('(All)'),
                        ],
                      );
                    },
                  ),
                ),
                ...items.map((item) => PopupMenuItem(
                  child: ValueListenableBuilder<Set<String>>(
                    valueListenable: selectedItemsNotifier,
                    builder: (_, selected, __) {
                      return Row(
                        children: [
                          Checkbox(
                            value: selected.contains(item),
                            onChanged: (_) => toggleItem(item),
                          ),
                          Text(item),
                        ],
                      );
                    },
                  ),
                )),
              ];
            },
          ),
        ],
      ),
      body: ValueListenableBuilder<Set<String>>(
        valueListenable: selectedItemsNotifier,
        builder: (_, selected, __) {
          return Center(child: Text('已选中：${selected.join(', ')}'));
        },
      ),
    );
  }
}

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