Flutter下拉菜单展开时，条目内播放/停止图标无法更新的解决方法

问题根源 #

• 所有条目共用同一个isPlaying变量，点击任意图标会切换所有条目的状态，不符合单个文件独立播放的需求。
• Dropdown的展开列表属于Overlay层，当前Widget的setState无法触发弹出层内条目的重建，导致图标状态不更新。

解决方案 #

1. 为每个文件维护独立播放状态 #

用Map<String, bool>替代单个isPlaying变量，记录每个文件的播放状态：

Map<String, bool> itemPlayStates = {};

@override
void initState() {
  super.initState();
  // 初始化每个item的播放状态为false
  for (var item in items) {
    itemPlayStates[item] = false;
  }
}

2. 替换为PopupMenuButton（更灵活控制条目刷新） #

PopupMenuButton的弹出菜单会在每次弹出时重新构建条目，状态变化能即时反映。完整代码：

import 'package:flutter/material.dart';

class SampleItemListView extends StatefulWidget {
  const SampleItemListView({super.key});

  static const routeName = '/';

  @override
  State<StatefulWidget> createState() => SampleItemListViewState();
}

class SampleItemListViewState extends State<SampleItemListView> {
  final List<String> items = const ['10', '20', '30'];
  Map<String, bool> itemPlayStates = {};
  String selectedItem = '10';

  @override
  void initState() {
    super.initState();
    // 初始化每个文件的播放状态
    for (var item in items) {
      itemPlayStates[item] = false;
    }
  }

  // 播放状态互斥：播放当前文件时停止其他文件
  void togglePlay(String item) {
    setState(() {
      // 先停止所有其他文件
      for (var key in itemPlayStates.keys) {
        if (key != item) {
          itemPlayStates[key] = false;
        }
      }
      // 切换当前文件的播放状态
      itemPlayStates[item] = !itemPlayStates[item]!;
      selectedItem = item;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Items'),
      ),
      body: Center(
        child: PopupMenuButton<String>(
          initialValue: selectedItem,
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(4),
            ),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                IconButton(
                  onPressed: () => togglePlay(selectedItem),
                  icon: itemPlayStates[selectedItem]!
                      ? const Icon(Icons.stop_circle)
                      : const Icon(Icons.play_arrow),
                ),
                const SizedBox(width: 8),
                Text(selectedItem),
                const SizedBox(width: 8),
                const Icon(Icons.arrow_drop_down),
              ],
            ),
          ),
          onSelected: (value) {
            setState(() {
              selectedItem = value;
            });
          },
          itemBuilder: (context) {
            return items.map((item) {
              return PopupMenuItem<String>(
                value: item,
                child: SizedBox(
                  width: 150,
                  child: Row(
                    children: [
                      IconButton(
                        onPressed: () {
                          togglePlay(item);
                          Navigator.pop(context); // 点击图标后关闭菜单
                        },
                        icon: itemPlayStates[item]!
                            ? const Icon(Icons.stop_circle)
                            : const Icon(Icons.play_arrow),
                      ),
                      const Spacer(),
                      Expanded(child: Text(item)),
                    ],
                  ),
                ),
              );
            }).toList();
          },
        ),
      ),
    );
  }
}

3. 若坚持使用DropdownButton2的优化方案 #

通过关闭再打开弹出层强制刷新条目状态，完整代码：

import 'package:flutter/material.dart';
import 'package:dropdown_button2/dropdown_button2.dart';

class SampleItemListView extends StatefulWidget {
  const SampleItemListView({super.key});

  static const routeName = '/';

  @override
  State<StatefulWidget> createState() => SampleItemListViewState();
}

class SampleItemListViewState extends State<SampleItemListView> {
  final List<String> items = const ['10', '20', '30'];
  Map<String, bool> itemPlayStates = {};
  String selectedItem = '10';
  final GlobalKey<DropdownButton2State> _dropdownKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    for (var item in items) {
      itemPlayStates[item] = false;
    }
  }

  void togglePlay(String item) {
    setState(() {
      // 互斥处理，可选
      for (var key in itemPlayStates.keys) {
        itemPlayStates[key] = key == item ? !itemPlayStates[key]! : false;
      }
      selectedItem = item;
    });
    // 强制Dropdown刷新弹出层
    if (_dropdownKey.currentState?.isOpen ?? false) {
      _dropdownKey.currentState?.close();
      Future.delayed(const Duration(milliseconds: 100), () {
        _dropdownKey.currentState?.open();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Items'),
      ),
      body: DropdownButtonFormField2<String>(
        key: _dropdownKey,
        value: selectedItem,
        onChanged: (value) {
          if (value != null) {
            setState(() {
              selectedItem = value;
            });
          }
        },
        items: items.map((item) {
          return DropdownMenuItem<String>(
            value: item,
            child: SizedBox(
              width: 150,
              child: Row(
                children: [
                  IconButton(
                    onPressed: () => togglePlay(item),
                    icon: itemPlayStates[item]!
                        ? const Icon(Icons.stop_circle)
                        : const Icon(Icons.play_arrow),
                  ),
                  const Spacer(),
                  Expanded(child: Text(item)),
                ],
              ),
            ),
          );
        }).toList(),
      ),
    );
  }
}

关键说明 #

• 用Map<String, bool>存储每个文件的播放状态，确保条目独立控制。
• PopupMenuButton的itemBuilder每次弹出都会重建条目，状态变化即时生效。
• DropdownButton2需通过关闭再打开弹出层强制刷新，因为其弹出层会缓存原有条目。

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