Flutter中能否保留PopUpMenuButton状态？解决音乐APP下载状态重置问题

我正在开发一款音乐APP，按UI设计要求需在弹出菜单项中展示下载、下载中进度及已下载状态。但PopUpMenuButton组件关闭后会被销毁卸载，导致再次打开时始终显示“下载”状态而非之前的“下载中”状态，请问能否避免其关闭后被销毁？

我已尝试使用回调函数、Provider、GetX、Auto Keep Alive及Stateful Builder，但均未生效。

PopUpMenuButton的弹窗属于临时组件，关闭后必然会被销毁，没法直接阻止它卸载。正确思路是把下载状态完全抽离到弹窗外部的全局/页面级状态容器中，让弹窗每次打开时都从外部读取实时状态，而非依赖自身的临时状态。

给你两个可行的落地方向：

• 全局下载状态管理器
  写一个单例模式的DownloadManager类，专门存所有歌曲的下载状态（未下载、下载中、已下载、进度值），并提供状态更新和读取的方法。弹窗打开时直接从这里取状态渲染UI，下载操作也通过它更新状态。

  class DownloadManager {
    static final DownloadManager _instance = DownloadManager._();
    factory DownloadManager() => _instance;
    DownloadManager._();
  
    final Map<String, DownloadState> _songStates = {};
    // 用ValueNotifier实现状态通知，也可以用Stream/GetX的Observable
    final ValueNotifier<Map<String, DownloadState>> _stateNotifier = ValueNotifier({});
  
    void updateSongState(String songId, DownloadState state) {
      _songStates[songId] = state;
      _stateNotifier.value = Map.from(_songStates);
    }
  
    DownloadState getSongState(String songId) {
      return _songStates[songId] ?? DownloadState.notDownloaded;
    }
  
    ValueNotifier<Map<String, DownloadState>> get stateNotifier => _stateNotifier;
  }
  
  enum DownloadState { notDownloaded, downloading, downloaded }
  

  弹窗里的写法：

  PopupMenuItem(
    child: ValueListenableBuilder(
      valueListenable: DownloadManager().stateNotifier,
      builder: (context, states, _) {
        final state = states[songId] ?? DownloadState.notDownloaded;
        if (state == DownloadState.downloading) {
          return LinearProgressIndicator(value: currentProgress);
        } else if (state == DownloadState.downloaded) {
          return const Text('已下载');
        } else {
          return const Text('下载');
        }
      },
    ),
    onTap: () {
      DownloadManager().updateSongState(songId, DownloadState.downloading);
      // 启动下载任务
      startDownloadTask(songId);
    },
  )
  

• 页面级局部状态管理
  如果不需要全局共享状态，也可以在页面的State类里维护一个ValueNotifier，弹窗通过ValueListenableBuilder监听这个状态，确保每次打开都能拿到最新值：

  class MusicListPageState extends State<MusicListPage> {
    final _downloadStates = ValueNotifier<Map<String, DownloadState>>({});
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          actions: [
            PopupMenuButton(
              itemBuilder: (context) {
                return [
                  PopupMenuItem(
                    child: ValueListenableBuilder(
                      valueListenable: _downloadStates,
                      builder: (context, states, _) {
                        final state = states[currentSongId] ?? DownloadState.notDownloaded;
                        // 根据state渲染对应UI
                      },
                    ),
                    onTap: () {
                      _downloadStates.value = {
                        ..._downloadStates.value,
                        currentSongId: DownloadState.downloading
                      };
                      // 执行下载逻辑
                    },
                  )
                ];
              },
            )
          ],
        ),
      );
    }
  }
  

你之前用Provider、GetX没生效，大概率是把状态放在了弹窗组件内部，导致弹窗销毁时状态也跟着丢了。只要把状态完全移到弹窗外部的容器里，让弹窗每次重建都从外部拉取状态，就能解决问题。

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