flutter - 根据 List 中第一个下拉列表的值填充第二个下拉列表>

Question

我正在 Flutter 中创建应用程序的这一部分。用户必须选择汽车品牌，然后第二个下拉列表将填充该汽车品牌的特定型号。我遇到的问题是因为数据来自静态 json 数据：

static List<Map<String, Object>> cars = [
{
  "brand": "Alfa Romeo",
  "models": [
    "145",
    "146",
    "147",
    "155",
    "156",
    "156 Sportwagon",
    "159",
    "159 Sportwagon",
    "164",
    "166",
    "4C",
    "Brera",
    "GTV",
    "MiTo",
    "Crosswagon",
    "Spider",
    "GT",
    "Giulietta",
    "Giulia"
  ]
},
{
  "brand": "Audi",
  "models": [
    "100",
    "100 Avant",
    "80",
    "80 Avant",
    "80 Cabrio",
    "90",
    "A1",
    "A2",
    "A3",
    "A3 Cabriolet",
    "A3 Limuzina",
    "A3 Sportback",
    "A4",
    "A4 Allroad",
    "A4 Avant",
    "A4 Cabriolet",
    "A5",
    "A5 Cabriolet",
    "A5 Sportback",
    "A6",
    "A6 Allroad",
    "A6 Avant",
    "A7",
    "A8",
    "A8 Long",
    "Q3",
    "Q5",
    "Q7",
    "R8",
    "RS4 Cabriolet",
    "RS4/RS4 Avant",
    "RS5",
    "RS6 Avant",
    "RS7",
    "S3/S3 Sportback",
    "S4 Cabriolet",
    "S4/S4 Avant",
    "S5/S5 Cabriolet",
    "S6/RS6",
    "S7",
    "S8",
    "SQ5",
    "TT Coupé",
    "TT Roadster",
    "TTS"
  ]
}];

如果用户选择“Alfa Romeo”，则“models”键中的项目/值应显示在第二个下拉列表中。

我能够使第一个下拉菜单工作，但我对如何进行第二个下拉菜单感到困惑：

Padding(
                      padding: const EdgeInsets.only(left: 24, top: 24, bottom: 10),
                      child: Text(
                        "Select your car brand:",
                        style: Theme.of(context)
                            .textTheme
                            .subtitle1!
                            .copyWith(color: Theme.of(context).hintColor),
                      ),
                    ),

                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 24.0),
                      child: DropdownButton<String>(
                        isDense: true,
                        hint: new Text("Select"),
                        value: _mySelection,
                        onChanged: (newValue) {

                          setState(() {
                            _mySelection = newValue!;
                          });

                          print (_mySelection);
                        },
                        items: MapUtils.cars.map((Map map) {
                          return new DropdownMenuItem<String>(
                            value: map["brand"].toString(),
                            child: new Text(
                              map["brand"],
                            ),
                          );
                        }).toList(),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 24, top: 24, bottom: 10),
                      child: Text(
                        "Select your car model:",
                        style: Theme.of(context)
                            .textTheme
                            .subtitle1!
                            .copyWith(color: Theme.of(context).hintColor),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 24.0),
                      child: DropdownButton<String>(
                        isDense: true,
                        hint: new Text("Select"),
                        value: MapUtils.cars.,
                        onChanged: (newValue) {

                          setState(() {
                            _mySelection = newValue!;
                          });

                          print (_mySelection);
                        },
                        items: MapUtils.cars.map((Map map) {
                          print(map["brand"]);
                          return new DropdownMenuItem<String>(
                            value: map["brand"].toString(),
                            child: new Text(
                              map["brand"],
                            ),
                          );
                        }).toList(),
                      ),
                    ),

标签： flutterdart

Answer 1

一个简单的解决方案是为当前选择的汽车型号设置一个变量。List<String> selectedCarModels = []这将在您onChanged的下拉列表中更新。

onChanged: (newValue) {
 setState(() {
  _mySelection = newValue!;
  selectedCarModels = cars.where((c)=>c['brand']==newValue).first['models'] as List<String>;
 print (_mySelection);
},

如果是的话onchanged，可能会更容易，所以你可以改变这种方式。newValueMap<String,Object>selectedCarModels=newValue['models']