Flutter中删除DropdownMenuItem后如何即时重建DropdownButton

你的问题核心是：下拉菜单处于展开状态时，修改数据源（删除/编辑项）后，菜单内容不会自动刷新，必须关闭重开才能看到变化；而用UniqueKey会直接导致菜单关闭，不符合需求。下面是具体的解决步骤和修改方案：

1. 移除UniqueKey #

直接删掉DropdownButton中的key: UniqueKey(),这一行。这个Key会强制Flutter每次重建都创建全新的DropdownButton实例，必然会关闭已展开的菜单，完全违背你的需求。

2. 确保Provider中的列表是不可变更新 #

DropdownProvider里的setDropdownItems方法必须生成新的列表实例，不能复用原列表的引用，这样context.select才能检测到数据变化并触发组件重建。示例Provider代码如下：

class DropdownProvider extends ChangeNotifier {
  List<Profile> _dropdownItems = [];
  String? _selectedValue;

  List<Profile> get dropdownItems => _dropdownItems;
  String? get selectedValue => _selectedValue;

  void setDropdownItems(List<Profile> newItems) {
    // 生成新列表，确保引用变化
    _dropdownItems = List.from(newItems);
    notifyListeners();
  }

  void setSelectedValue(String? value) {
    _selectedValue = value;
    notifyListeners();
  }
}

3. 处理删除后的选中值（避免报错） #

如果删除的是当前选中的Profile，必须同步更新selectedValue，否则DropdownButton会因找不到匹配的value而报错。示例删除逻辑如下：

void _deleteProfile(String title) {
  // 从Preferences中删除对应项
  Preferences.instance.deleteProfile(title);
  // 生成更新后的列表并同步到Provider
  final updatedList = dropdownItems.where((p) => p.title != title).toList();
  _dropdownProvider.setDropdownItems(updatedList);
  // 若删除的是当前选中项，清空选中值
  if (_dropdownProvider.selectedValue == title) {
    _dropdownProvider.setSelectedValue(null);
    Preferences.instance.setSelectedProfile(null);
  }
}

4. 修改后的完整State代码 #

class _ChatDropdownState extends State<ChatDropdown> { 
  List<Profile> dropdownProfiles = []; 
  late DropdownProvider _dropdownProvider;

  @override 
  void initState() { 
    super.initState(); 
    _dropdownProvider = context.read<DropdownProvider>(); 
    WidgetsBinding.instance.addPostFrameCallback((_) { 
      _loadDropdownData(); 
    }); 
  }

  Future<void> _loadDropdownData() async { 
    dropdownProfiles = Preferences.instance.getProfiles(); 
    String? selectedProfile = Preferences.instance.getSelectedProfile(); 
    setState(() { 
      _dropdownProvider.setDropdownItems(dropdownProfiles); 
      if (_dropdownProvider.selectedValue == null && selectedProfile != null) { 
        _dropdownProvider.setSelectedValue(selectedProfile); 
      } 
    }); 
  }

  @override 
  Widget build(BuildContext context) { 
    String? selectedValue = context.select<DropdownProvider, String?>((value) => value.selectedValue);
    List<Profile> dropdownItems = context.select<DropdownProvider, List<Profile>>((value) => value.dropdownItems);

    return Column(
      children: [
        DropdownButton<String>(
          value: selectedValue,
          // 已移除UniqueKey
          items: [
            const DropdownMenuItem<String>(
              value: 'addProfile',
              child: Text('添加配置'),
            ),
            ...dropdownItems.reversed.map((profile) {
              return DropdownMenuItem<String>(
                value: profile.title,
                child: GestureDetectorWithContextMenu(
                  onTap: () => onTapDefaults(),
                  contextMenuBuilder: (_, primaryAnchor) => _DropDownSelectionToolbar(
                    primaryAnchor: primaryAnchor,
                    title: profile.title,
                    context: profile.context,
                    character: profile.character,
                  ),
                  child: Text(profile.title),
                ),
              );
            }),
          ],
          onChanged: (String? value) {
            if (value == 'addProfile') {
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return const EditChatDialog();
                },
              );
            } else {
              _dropdownProvider.setSelectedValue(value);
              Preferences.instance.setSelectedProfile(value!);
            }
          },
        ),
      ],
    );
  } 
}

关键原理说明 #

Flutter的DropdownButton展开菜单时，会基于当前的items创建弹出菜单内容。只要items的数据源（Provider中的dropdownItems）是不可变更新的，context.select就会触发DropdownButton重建，此时展开的菜单会自动使用新的items重新渲染，无需关闭重开。而UniqueKey会破坏这个机制，因为它强制重建整个DropdownButton组件，导致菜单被关闭。

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