Flutter如何取消下拉菜单（DropdownMenu）中已选中的选项？

针对你遇到的选中后无法清除选择、清空输入框后状态不同步的问题，可通过以下修改解决：

关键改动点 #

• 允许选择空值：调整onSelected逻辑，支持接收null以处理取消选择场景
• 添加主动清空按钮：利用DropdownMenu的trailing参数添加清空按钮，触发取消操作
• 同步本地状态与数据源：确保本地选中状态和数据源保持一致，避免渲染时状态回滚

修改后的完整代码 #

// 可选的全体机组人员下拉选择器
class SelectCrewMember extends StatefulWidget {
  final int index;

  const SelectCrewMember(this.index, {super.key});

  @override
  State<SelectCrewMember> createState() => _SelectCrewMemberState();
}

class _SelectCrewMemberState extends State<SelectCrewMember> {
  CrewMember? dropdownValue;

  @override
  void initState() {
    super.initState();
    // 初始化时同步数据源的选中状态
    dropdownValue = CheckinData().getPositionToFill(widget.index).member;
  }

  @override
  Widget build(BuildContext context) {
    final position = CheckinData().getPositionToFill(widget.index);

    return Padding(
      padding: const EdgeInsets.fromLTRB(20, 8, 20, 8),
      child: DropdownMenu<CrewMember>(
        enableFilter: true,
        menuHeight: 300,
        width: 300,
        // 用本地状态作为选中项，避免直接依赖数据源导致状态混乱
        initialSelection: dropdownValue,
        label: Text(position.position.name),
        // 有选中项时显示清空按钮
        trailing: dropdownValue != null
            ? IconButton(
                icon: const Icon(Icons.clear),
                onPressed: () {
                  setState(() {
                    dropdownValue = null;
                    CheckinData().updateCrew(null, widget.index);
                  });
                },
              )
            : null,
        onSelected: (CrewMember? value) {
          setState(() {
            dropdownValue = value;
            // 支持传入null更新数据源，完成取消选择
            CheckinData().updateCrew(value, widget.index);
          });
        },
        dropdownMenuEntries: CheckinData()
            .getCrewToPickFrom(widget.index)
            .map<DropdownMenuEntry<CrewMember>>((CrewMember value) {
          return DropdownMenuEntry<CrewMember>(
            value: value,
            label: value.name,
          );
        }).toList(),
      ),
    );
  }
}

改动说明 #

1. 初始化状态同步：在initState中将数据源的初始选中值赋值给dropdownValue，确保本地状态和数据源初始状态一致
2. 主动清空按钮：当存在选中项时显示清空按钮，点击后直接将本地状态设为null并同步更新数据源
3. 支持空值更新：取消onSelected中对value的非空强制，允许通过清空按钮触发的null值更新数据源
4. 本地状态驱动选中项：用本地dropdownValue作为initialSelection的来源，避免每次build直接读取数据源导致状态回滚

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