Flutter中如何基于加载状态动态更新PopupMenuButton内容？

PopupMenuButton的菜单内容是在弹出时通过itemBuilder生成的，一旦菜单作为独立的OverlayEntry显示后，父组件（Drawer）的setState无法自动触发菜单内容重建，这就是加载完成后菜单不更新、重开才生效的原因——StatefulBuilder无效也是因为它的作用范围仅限于当前组件上下文，无法触达Overlay中的菜单内容。

以下是几种可行的解决方案：

方案一：使用GlobalKey强制刷新PopupMenuButton #

给PopupMenuButton绑定GlobalKey，在数据加载完成后手动触发其State刷新，从而更新菜单内容。

代码示例：

class MyDrawer extends StatefulWidget {
  @override
  _MyDrawerState createState() => _MyDrawerState();
}

class _MyDrawerState extends State<MyDrawer> {
  final GlobalKey<_PopupMenuButtonState> _popupMenuKey = GlobalKey();
  List<String> myItems = [];
  bool loading = true;

  @override
  void initState() {
    super.initState();
    _loadItems();
  }

  void _loadItems() async {
    // 模拟异步加载数据
    await Future.delayed(const Duration(seconds: 2));
    setState(() {
      myItems = ['选项1', '选项2', '选项3'];
      loading = false;
    });
    // 强制刷新PopupMenuButton的状态
    _popupMenuKey.currentState?.setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: [
          PopupMenuButton(
            key: _popupMenuKey,
            itemBuilder: (context) {
              if (loading) {
                return const [PopupMenuItem(child: Text('加载中...'))];
              } else {
                return myItems.map((item) => PopupMenuItem(child: Text(item))).toList();
              }
            },
          ),
        ],
      ),
    );
  }
}

方案二：用ValueNotifier+ValueListenableBuilder管理状态（推荐） #

将加载状态和列表数据用ValueNotifier包裹，在itemBuilder中通过ValueListenableBuilder监听状态变化，数据更新时会自动重建菜单内容，无需手动操作。

代码示例：

class MyDrawer extends StatefulWidget {
  @override
  _MyDrawerState createState() => _MyDrawerState();
}

class _MyDrawerState extends State<MyDrawer> {
  final ValueNotifier<bool> _loadingNotifier = ValueNotifier(true);
  final ValueNotifier<List<String>> _itemsNotifier = ValueNotifier([]);

  @override
  void initState() {
    super.initState();
    _loadItems();
  }

  void _loadItems() async {
    // 模拟异步加载数据
    await Future.delayed(const Duration(seconds: 2));
    _itemsNotifier.value = ['选项1', '选项2', '选项3'];
    _loadingNotifier.value = false;
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: [
          PopupMenuButton(
            itemBuilder: (context) {
              return ValueListenableBuilder(
                // 合并两个监听对象，任意一个变化都会触发重建
                valueListenable: Listenable.merge([_loadingNotifier, _itemsNotifier]),
                builder: (context, _, __) {
                  if (_loadingNotifier.value) {
                    return const [PopupMenuItem(child: Text('加载中...'))];
                  } else {
                    return _itemsNotifier.value.map((item) => PopupMenuItem(child: Text(item))).toList();
                  }
                },
              );
            },
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _loadingNotifier.dispose();
    _itemsNotifier.dispose();
    super.dispose();
  }
}

方案三：加载完成后自动刷新菜单（交互型方案） #

如果可以接受菜单自动关闭再重新打开的交互，可在数据加载完成后先关闭当前菜单，再重新触发打开：

void _loadItems() async {
  await Future.delayed(const Duration(seconds: 2));
  setState(() {
    myItems = ['选项1', '选项2', '选项3'];
    loading = false;
  });
  // 关闭当前菜单
  Navigator.pop(context);
  // 重新打开菜单
  _popupMenuKey.currentState?.showButtonMenu();
}

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