根据上一个 Flutter 的选择更改下拉按钮的选择

Question

我有 2 个 DropdownButtonFormField 可以选择汽车。我需要根据用户从 DropdownButtonFormField 中的第一个选择中选择的车型更改按钮的第二个选择（即如果用户在第一个中选择梅赛德斯，在下面的 DropdownButtonFormField 中，我只想显示梅赛德斯车型而不是，比方说，奥迪）。

我怎样才能做到这一点？这是代码：

String _make, _model;

/// List of cars and models
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'];


/*two DropdownButtonFormFields, but the second one needs to match 
 it's car manufacturer selection from the carList selection
 (i.e. if you select Audi, it must only show the modelAudi list (A6,
 A8, Q7) in the second DropdownButtonFormField)
*/

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

/* here is where I need to implement logic 
that maps out the model names that matches the car maker
*/
  items: modelAudi
      .map((label) => DropdownMenuItem(
            child: Text(label.toString()),
            value: label,
          ))
      .toList(),
  onChanged: (value) {
    setState(() {
      _model = value;
      print(value);
    });
  },
),

第一个按钮的 DropDown：

自然而然，因为我没有背后的逻辑，所以无论我从汽车列表中选择什么，我都会将其作为模型选择，但我希望它仅映射出您选择的汽车列表中的模型。

Answer 1

这是 switch 语句的一个很好的用例。根据此示例为每个汽车制造商定义案例：

String _maker;
List chosenMakerModel;

switch (_maker) {
  case 'Audi':
   chosenMakerModel = modelAudi; 
    break;
  case 'BMW':
   // implement logic:
    break;
  case 'OTHER MANUFACTURER':
    // implement logic;
    break;
 }

使用上面的示例代码使用 chosenMakerModel 而不是 modelAudi

Answer 2

你可以创建一个模型selection方法来处理这种情况，比如

  List<String> _selectModel(String? modelName) {
    return modelName == carList[0]
        ? modelAudi
        : modelName == carList[1]
            ? modelMercedes
            : modelBMW; // initally it will have modelBMW
  }

这将决定第二个下拉项。如果您单击 select 第二个下拉项目 1st，它将通过错误。要处理这种情况，您还需要更新第二个下拉值。您可以设置第二个下拉菜单 value=null。因此，我们需要为 selection 值使用可空字符串。


class MyProfileState extends State<StatefulWidget> {
  String? _make, _model;

  /// List of cars and models
  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'];

  List<String> _selectModel(String? modelName) {
    return modelName == carList[0]
        ? modelAudi
        : modelName == carList[1]
            ? modelMercedes
            : modelBMW;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        DropdownButtonFormField<String>(
          value: _make,
          items: carList
              .map((label) => DropdownMenuItem(
                    child: Text(label.toString()),
                    value: label,
                  ))
              .toList(),
          onChanged: (value) {
            setState(() {
              _make = value;
              _model = null;
              print(value);
            });
          },
        ),
        DropdownButtonFormField<String>(
          value: _model,
          items: _selectModel(_make)
              .map((label) => DropdownMenuItem(
                    child: Text(label.toString()),
                    value: label,
                  ))
              .toList(),
          onChanged: (value) {
            setState(() {
              _model = value;
              print(value);
            });
          },
        ),
      ],
    ));
  }
}

根据上一个 Flutter 的选择更改下拉按钮的选择

Change selection of dropdown button according to the choice from the previous one, Flutter

flutter

mobile

flutter-dropdownbutton