Flutter中如何限制DropdownMenuItem仅可被用户选择一次？

调整思路 #

要实现「首次选择第一个选项后，后续第一个选项永久不可点击」的需求，你需要新增一个状态标记用户是否已经选择过第一个选项，再对应修改下拉项的启用逻辑和选择回调逻辑即可。 #

具体修改步骤 #

• 第一步：新增状态变量，在你的State类中添加以下代码：

// 标记是否已选择过第一个选项
bool _hasSelectedFirstOption = false;
// 存储第一个选项的唯一标识testId，若data是异步接口返回，可在接口拿到data后再赋值
late String firstOptionTestId;

@override
void initState() {
  super.initState();
  // 初始化时绑定第一个选项的testId，确保对应你下拉列表的第一个选项
  firstOptionTestId = data[0].testId;
}

• 第二步：修改DropdownMenuItem的enabled判断逻辑，替换原有enabled的赋值：

enabled: _hasSelectedFirstOption ? data.testId != firstOptionTestId : true,

• 第三步：在onChanged的setState回调中新增标记触发逻辑：

setState(() {
  encTestId = value.testId;
  testName = value.testName;
  _selectedTest = value;
  // 新增：如果本次选的是第一个选项，标记为已选过，后续永久禁用第一个选项
  if (value.testId == firstOptionTestId) {
    _hasSelectedFirstOption = true;
  }
});

修改后完整代码 #

child: DropdownButton<Datum>(
  enabled: enabled_Item,
  value: _selectedTest,
  hint: Text(""),
  //underline: SizedBox(),
  isExpanded: true,
  items: data
      .map(
          (Datum data) => DropdownMenuItem<Datum>(
                child: Text("${data.testName}"),
                // 修改后的启用逻辑
                enabled: _hasSelectedFirstOption ? data.testId != firstOptionTestId : true,
                value: data,
              ))
      .toList()
      .cast<DropdownMenuItem<Datum>>(),
  onChanged: (value) {
    print(
        "This is the TestName : ${value!.testName}");
    print(
        "This is the EncTestId which is need to get Test Fee : ${value.testId}");
    setState(() {
      encTestId = value.testId; // 下拉选中的encTestId用于获取测试费用
      testName = value.testName;
      _selectedTest = value;
      // 新增：判断是否选了第一个选项
      if (value.testId == firstOptionTestId) {
        _hasSelectedFirstOption = true;
      }
    });
    //GetTestByLab(value!.encPartnerId); // 传递encid到下一个API函数
  }),

注意：如果你的data列表是动态获取的，不需要在initState里赋值firstOptionTestId，可以在接口请求成功拿到data之后再赋值即可。

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