当我从 DropdownMenuItem 中删除项目时，如何立即重建 dropdownButton

Question

我有一个 dropdownButton ，我在其中添加一些内容到列表中，然后使用 contextMenu 进行编辑和删除操作该列表，我希望在删除该项目时立即显示所操作的列表。截至目前，如果我重新打开下拉列表，我就可以看到更新的项目。

我尝试使用全局键和唯一键。使用唯一键关闭下拉菜单。我不想再次关闭并重新打开下拉列表来获取更新的列表。

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,
      key: UniqueKey(),
      items: [
        const DropdownMenuItem<String>(
          value: 'addProfile',
          child: Text('Add Profile'),
        ),
        ...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!);
        }
      },
    ),
  ],
);
} }

Answer 1

要在从

DropdownButton

中删除项目时立即重建

DropdownMenuItem

，您可以在修改下拉项目列表时使用

setState

方法触发小部件树的重建。由于您已经在使用

setState

来更新下拉项，因此您需要确保对下拉项列表的修改反映在 UI 中