如何在Flutter中实现车型与车款的多级联动下拉列表？

现存问题 #

• 联动逻辑倒置：你在第二个车款下拉的onChanged里修改carMake列表，完全搞反了逻辑——应该是用户选完车型后立刻更新对应的车款列表，而非选车款时才调整。
• 覆盖范围不足：当前仅处理了Audi和BMW，剩余23个车型无对应车款列表，选择其他车型时车款下拉会无数据或报错。
• 变量处理不规范：
  • 若carMake声明为final，无法重新赋值，必须改为可变更变量；
  • selectedCarModel和selectedCarMake未初始化，直接作为DropdownButton的value会触发空值报错；
  • 直接用val!强制解包空值，存在崩溃风险。

优化后的代码实现 #

首先用Map统一管理车型与车款的对应关系，便于后续维护：

// 车型-车款映射表，新增车型直接添加键值对即可
final Map<String, List<String>> carModelToMakes = {
  'Audi': ['A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'Q3', 'Q5', 'Q7', 'Q8', 'R8', 'TT'],
  'BMW': ['1 Series', '2 Series', '3 Series', '4 Series', '5 Series', '6 Series', '7 Series', '8 Series', 'M2', 'M3', 'M4', 'M5', 'M6', 'X1', 'X2', 'X3', 'X4', 'X5', 'X6', 'X7', 'Z4', 'i3', 'i8'],
  // 示例：新增丰田车型
  'Toyota': ['Camry', 'Corolla', 'RAV4', 'Hilux'],
};

// 提取所有车型作为第一个下拉的选项
final List<String> carModels = carModelToMakes.keys.toList();

// 状态变量声明
late String selectedCarModel;
late List<String> currentCarMakes;
String? selectedCarMake;

在initState中初始化状态：

@override
void initState() {
  super.initState();
  // 默认选中第一个车型，加载对应车款
  selectedCarModel = carModels.first;
  currentCarMakes = carModelToMakes[selectedCarModel] ?? [];
}

最后是下拉按钮的实现：

DropdownButton<String>(
  value: selectedCarModel,
  items: carModels.map((model) {
    return DropdownMenuItem<String>(
      value: model,
      child: Text(model),
    );
  }).toList(),
  onChanged: (val) {
    if (val == null) return;
    setState(() {
      selectedCarModel = val;
      // 更新当前车款列表
      currentCarMakes = carModelToMakes[val] ?? [];
      // 重置选中的车款，避免车型切换后车款不匹配
      selectedCarMake = null;
    });
  },
),
const SizedBox(height: 10),
DropdownButton<String?>(
  value: selectedCarMake,
  hint: const Text('请选择车款'),
  items: currentCarMakes.map((make) {
    return DropdownMenuItem<String?>(
      value: make,
      child: Text(make),
    );
  }).toList(),
  onChanged: (val) {
    setState(() {
      selectedCarMake = val;
    });
  },
),

优化点说明 #

1. 用Map统一管理车型与车款的对应关系，后续扩展车型只需在Map中添加数据，无需新增单独列表变量；
2. 车型选择后立刻更新车款列表，并重置选中的车款，避免出现车型与车款不匹配的情况；
3. 加入空值判断，避免强制解包导致的崩溃；
4. 给第二个下拉添加hint，未选择车款时提示用户，提升交互体验。

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