Flutter实现双下拉列表选中互斥 避免安全问题重复选择

你原有代码的核心问题：

• 直接修改接口返回的questions列表，会导致两个下拉的数据源都被篡改，无法实现双向互斥过滤
• checkSelectedQuestion逻辑存在类型错误，把整个列表作为元素添加到newQuestions里，完全不符合下拉列表的数据源要求

调整步骤 #

1. 定义基础变量 #

首先保留接口返回的原始问题列表作为不可修改的基准数据源，全程不要直接改动它：

// 接口返回的原始安全问题列表，仅作为过滤基准不做修改
List originalQuestions = [];
// 两个下拉的选中值
String? dropDownSecurityQuestionOne;
String? dropDownSecurityQuestionTwo;

2. 改造两个Dropdown的items过滤逻辑 #

• 第一个安全问题下拉的可选列表，排除第二个下拉已选中的问题
• 第二个安全问题下拉的可选列表，排除第一个下拉已选中的问题

你贴的第二个下拉的items部分修改如下：

items: originalQuestions.where((value) {
  // 第一个下拉未选中时不过滤，选中后排除对应ID的问题
  if(dropDownSecurityQuestionOne == null) return true;
  return value['ID'].toString() != dropDownSecurityQuestionOne;
}).map((value) {
  return DropdownMenuItem(
    value: value['ID'].toString(),
    child: Padding(
      padding: const EdgeInsets.only(left: 20.0),
      child: Text(
        value['question'].toString(),
      ),
    ),
  );
}).toList(),

第一个下拉的items过滤逻辑反过来即可：

items: originalQuestions.where((value) {
  if(dropDownSecurityQuestionTwo == null) return true;
  return value['ID'].toString() != dropDownSecurityQuestionTwo;
}).map((value) {
  // 沿用你原有DropdownMenuItem的配置即可
}).toList(),

3. 优化选中变更逻辑 #

删除你原来写的checkSelectedQuestion方法，直接在onChanged回调里做互斥校验即可：
第二个下拉的onChanged修改为：

onChanged: (newValue) {
  setState(() {
    dropDownSecurityQuestionTwo = newValue.toString();
    // 可选逻辑：如果新选的问题和第一个下拉重复，清空第一个选中值，也可以替换成toast提示
    if(dropDownSecurityQuestionTwo == dropDownSecurityQuestionOne) {
      dropDownSecurityQuestionOne = null;
    }
  });
},

第一个下拉的onChanged同理：

onChanged: (newValue) {
  setState(() {
    dropDownSecurityQuestionOne = newValue.toString();
    if(dropDownSecurityQuestionOne == dropDownSecurityQuestionTwo) {
      dropDownSecurityQuestionTwo = null;
    }
  });
},

注意事项 #

• 所有过滤逻辑在构建下拉选项时实时计算，不要修改原始基准数据源，避免出现可选列表丢失问题
• 切换任意一个下拉的选中值时，另一个下拉的可选列表会自动更新，无需额外手动操作
• 如果不需要自动清空重复的选中值，也可以直接抛出提示要求用户修改选中项，逻辑更友好

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