Flutter中多个独立DropdownButton组件异常报错问题求助

这个错误的根源其实很直观：你现在让两个下拉菜单共享了同一个dropdownvalue状态变量，而且初始值'--'根本不在任何一个下拉菜单的选项列表里。Flutter的DropdownButton有个硬性规则：当前绑定的value必须在它自己的items列表中存在，且只能找到唯一匹配的选项——这两个条件你现在都没满足，所以触发了那个断言错误。

要实现独立的多个下拉菜单，核心就是给每个下拉菜单分配专属的状态变量，各自管理自己的选中状态。下面是具体的修复步骤：

1. 定义独立的状态变量 #

在你的State类里，把原来的单个变量拆成两个，分别对应两个下拉菜单：

class _YourPageState extends State<YourPage> {
  // 给每个下拉菜单单独分配状态变量
  String dropdownValue1 = '--'; 
  String dropdownValue2 = '--'; 

  @override
  Widget build(BuildContext context) {
    // 后续代码...
  }
}

2. 绑定对应变量并补全选项（可选） #

接下来修改两个DropdownButton的代码，分别绑定对应的变量。如果想保留'--'作为初始占位提示，需要给每个下拉菜单的选项列表加上这个初始项；如果不需要占位，直接把初始值设为对应菜单里的某个默认选项即可。

方案一：带占位提示的写法 #

Column(
  children: [
    DropdownButton<String>(
      value: dropdownValue1, // 绑定第一个变量
      items: [
        // 添加初始占位选项
        const DropdownMenuItem(value: '--', child: Text('--请选择第一个选项--')),
        // 展开原有的选项列表
        ...<String>['A', 'B', 'C', 'D'].map((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList(),
      ],
      onChanged: (String? newValue) {
        setState(() {
          dropdownValue1 = newValue!; // 更新第一个变量
        });
      },
    ),
    DropdownButton<String>(
      value: dropdownValue2, // 绑定第二个变量
      items: [
        const DropdownMenuItem(value: '--', child: Text('--请选择第二个选项--')),
        ...<String>['E', 'F', 'G', 'H'].map((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList(),
      ],
      onChanged: (String? newValue) {
        setState(() {
          dropdownValue2 = newValue!; // 更新第二个变量
        });
      },
    ),
  ],
)

方案二：直接默认选中第一个选项 #

如果不需要占位提示，直接把初始值设为对应菜单的第一个选项，这样就不用额外添加占位项了：

// State类里的变量初始化
String dropdownValue1 = 'A';
String dropdownValue2 = 'E';

// 下拉菜单代码保持原有items列表，只修改绑定的变量和更新逻辑
DropdownButton<String>(
  value: dropdownValue1,
  items: <String>['A', 'B', 'C', 'D']
      .map((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
  onChanged: (String? newValue) {
    setState(() {
      dropdownValue1 = newValue!;
    });
  },
),
// 第二个下拉菜单同理，绑定dropdownValue2

这样修改后，每个下拉菜单都有自己独立的状态，选中的值也都在各自的选项列表里，那个断言错误就会消失，两个下拉菜单也能独立工作了。

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