Flutter中如何获取自定义widget内所有下拉框字段的选中值？

问题原因 #

你当前使用单个变量存储所有下拉框的选中值，每个下拉框实例触发选中时都会覆盖同一个变量，所以最终只能拿到最后一个操作的下拉框的选中值。

解决方案 #

你可以通过Map结构按唯一标识存储每个下拉框的选中值，改造步骤如下：

1. 定义统一存储所有选中值的Map结构，你可以根据业务场景把它存在父组件State、或者全局状态管理类中：

// key为下拉框对应字段的唯一标识，value存储选中的数值和展示文本
Map<String, Map<String, dynamic>> allDropdownSelected = {};

2. 改造你的自定义下拉Widget构造方法，新增两个参数：唯一字段标识、选中回调函数：

class CustomDropdown extends StatefulWidget {
  // 新增：当前下拉框对应的唯一字段标识，不可重复
  final String fieldKey;
  // 新增：选中后的回调，把字段标识、选中值、选中展示文本传给父层
  final Function(String fieldKey, dynamic selectedValue, String selectedName) onSelect;
  // 你原来的其他参数
  final List<Option> values;
  // ... 其他原有参数

  const CustomDropdown({
    super.key,
    required this.fieldKey,
    required this.onSelect,
    required this.values,
    // ... 其他原有参数
  });
}

3. 修改下拉框选中的回调逻辑，选中时触发父层传入的回调更新存储Map：

return ListTile(
  title: Text(widget.values[index].name, style: textStyle),
  onTap: () {
    setState(() {
      this.dropDownValue = widget.values[index].name;
      _collapse();
    });
    // 触发回调通知父层更新选中值
    widget.onSelect(widget.fieldKey, widget.values[index].value, widget.values[index].name);
  },
);

4. 在父层使用下拉组件时，给每个下拉传入唯一的fieldKey，并在回调中更新存储Map：

// 示例：渲染多个下拉框
CustomDropdown(
  fieldKey: 'province', // 第一个下拉对应省字段
  values: provinceOptions,
  onSelect: (fieldKey, value, name) {
    setState(() {
      allDropdownSelected[fieldKey] = {
        'value': value,
        'name': name
      };
    });
  },
),
CustomDropdown(
  fieldKey: 'city', // 第二个下拉对应市字段
  values: cityOptions,
  onSelect: (fieldKey, value, name) {
    setState(() {
      allDropdownSelected[fieldKey] = {
        'value': value,
        'name': name
      };
    });
  },
),
// 其他下拉框同理

后续你需要获取所有下拉框选中值时，直接读取allDropdownSelected即可，里面会按字段key存储所有已选中的下拉值。如果你的下拉框数量较多，可以把回调逻辑抽成公共方法，减少重复代码。

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