Flutter如何根据首个DropdownButtonFormField的选择联动第二个下拉选项

你当前的问题是第二个下拉框的选项数据源固定绑定了modelAudi列表，没有跟随第一个下拉框的选中值动态切换，所以永远只展示奥迪车型。做两处核心修改即可实现联动效果：

1. 第一个下拉框选中品牌后，清空已选车型，避免出现车型值与当前品牌不匹配的异常
2. 第二个下拉框的选项列表根据当前选中的品牌动态生成

第一种：最小改动适配你的现有代码 #

String? _make, _model;

/// 汽车品牌和车型列表
List<String> carList = [
  'Audi',
  'BMW',
  'Mercedes',
];
List<String> modelAudi = ['A6', 'A8', 'Q7',];
List<String> modelMercedes = ['E-Class', 'S-Class','Maybach'];
List<String> modelBMW = ['3-Series', 'X5', 'X7'];

// 第一个品牌选择下拉框
DropdownButtonFormField<String>(
  value: _make,
  items: carList
      .map((label) => DropdownMenuItem(
            child: Text(label),
            value: label,
          ))
      .toList(),
  onChanged: (value) {
    setState(() {
      _make = value;
      // 切换品牌后清空已选车型，避免值不匹配报错
      _model = null;
    });
  },
),

// 第二个车型选择下拉框
DropdownButtonFormField<String>(
  value: _model,
  // 动态根据选中的品牌返回对应车型列表
  items: _getCurrentModelList()
      .map((label) => DropdownMenuItem(
            child: Text(label),
            value: label,
          ))
      .toList(),
  onChanged: (value) {
    setState(() {
      _model = value;
    });
  },
),

// 抽离获取当前车型列表的方法
List<String> _getCurrentModelList() {
  switch(_make) {
    case 'Audi':
      return modelAudi;
    case 'BMW':
      return modelBMW;
    case 'Mercedes':
      return modelMercedes;
    default:
      // 未选品牌时返回空列表
      return [];
  }
}

第二种：更易维护的优化方案 #

把品牌和车型的映射关系存为Map，后续新增品牌无需修改判断逻辑，只需更新Map即可：

String? _make, _model;

// 统一维护品牌-车型映射关系
List<String> carList = ['Audi', 'BMW', 'Mercedes'];
Map<String, List<String>> carModelMap = {
  'Audi': ['A6', 'A8', 'Q7'],
  'BMW': ['3-Series', 'X5', 'X7'],
  'Mercedes': ['E-Class', 'S-Class','Maybach'],
};

DropdownButtonFormField<String>(
  value: _make,
  items: carList
      .map((label) => DropdownMenuItem(
            child: Text(label),
            value: label,
          ))
      .toList(),
  onChanged: (value) {
    setState(() {
      _make = value;
      _model = null;
    });
  },
),

DropdownButtonFormField<String>(
  value: _model,
  items: (carModelMap[_make] ?? [])
      .map((label) => DropdownMenuItem(
            child: Text(label),
            value: label,
          ))
      .toList(),
  onChanged: (value) {
    setState(() {
      _model = value;
    });
  },
),

注意：Dart空安全版本需要把_make和_model声明为可空类型String?，避免空值报错。

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