Flutter下拉框联动需求：选择国家后仅展示对应车辆

你需要根据第一个下拉框选中的国家，筛选出对应车辆作为第二个下拉框的选项，核心是找到选中国家对应的车辆列表，而非遍历所有国家。以下是修改后的完整代码：

import 'package:flutter/material.dart';

import '../../domain/model/vignette_model/country_model.dart';
import '../../domain/model/vignette_model/vignette_model.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({
    super.key,
  });

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String? selectedValue;
  String? selectedVehic; // 对应单个车辆字符串

  VignetteModel model = VignetteModel(
    countrys: [
      const CountryModel(
        country: 'Austria',
        cars: [
          'Truck',
          'Car1',
        ],
      ),
      const CountryModel(
        country: 'Germany',
        cars: [
          'Truck',
          'Car2',
        ],
      ),
      const CountryModel(
        country: 'Hungary',
        cars: [
          'Truck',
          'Car3',
        ],
      ),
    ],
  );

  // 获取选中国家对应的车辆列表
  List<String>? getSelectedCountryCars() {
    if (selectedValue == null) return null;
    final selectedCountry = model.countrys?.firstWhere(
      (country) => country.country == selectedValue,
      orElse: () => const CountryModel(country: '', cars: []),
    );
    return selectedCountry?.cars;
  }

  @override
  Widget build(BuildContext context) {
    final selectedCars = getSelectedCountryCars();
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(25),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const SizedBox(height: 30),
            DropdownButtonFormField(
              items: model.countrys?.map((e) {
                return DropdownMenuItem(
                  value: e.country,
                  child: Text(e.country.toString()),
                );
              }).toList(),
              onChanged: (value) {
                setState(() {
                  selectedValue = value;
                  selectedVehic = null; // 切换国家时重置选中车辆
                });
              },
              value: selectedValue,
            ),
            if (selectedValue != null && selectedCars?.isNotEmpty == true)
              DropdownButtonFormField<String>(
                items: selectedCars?.map((car) {
                  return DropdownMenuItem(
                    value: car,
                    child: Text(car),
                  );
                }).toList(),
                onChanged: (value) {
                  setState(() {
                    selectedVehic = value;
                    debugPrint(value.toString());
                  });
                },
                value: selectedVehic,
                hint: const Text('选择车辆'),
              )
            else
              const Text('请先选择国家'),
          ],
        ),
      ),
    );
  }
}

关键修改说明： #

• 新增getSelectedCountryCars()方法，通过firstWhere匹配选中国家，提取对应的车辆列表
• 切换国家时重置selectedVehic，避免选中状态残留
• 第二个下拉框指定泛型String，遍历选中国家的车辆列表生成单个车辆选项，确保每个选项对应具体车型
• 修正selectedVehic的赋值逻辑，直接接收单个车型字符串

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