flutter 中的多重依赖下拉列表

Question

我正在尝试在 flutter 上构建多个依赖下拉列表。第二个依赖于第一个。 这是我实现的下拉菜单的代码。

Container(
            child: new DropdownButton<String>(
              underline: SizedBox(
                height: 1,
              ),
              hint: new Text("Select Faculty"),
              value: facultyId,
              items: faculty.map((item) {
                return new DropdownMenuItem(
                  child: new Text(item['name']),
                  value: item['id'].toString(),
                );
              }).toList(),
              onChanged: (faculty == null)
                  ? null
                  : (String newValue) {
                      setState(() {
                        filteredbatch.clear();
                        facultyId = newValue;
                        for (var item in allbatch) {
                          if (item['facultyId'].toString() == newValue){
                          filteredbatch.add(item);
                            disableBatch = false;
                          }
                        }
                      });
                      print(facultyId);
                    },
            ),
          ),
          Container(
            child: new DropdownButton<String>(
                underline: SizedBox(
                  height: 1,
                ),
                disabledHint: new Text("Select Faculty First"),
                hint: Text("Select Batch"),
                value: batchId,
                onChanged: disableBatch
                    ? null
                    : (String newValue) {
                        setState(() {
                          batchId = newValue;
                          disableSection = false;
                        });
                        print(batchId);
                      },
                items: filteredbatch.map((item) {
                  return DropdownMenuItem(
                    child: Text(item['name']),
                    value: item['id'].toString(),
                  );
                }).toList()),
          ),

每当我 select 第一个下拉项目时，它会启用第二个下拉菜单并让我从该下拉菜单中选择一个项目 select 。 当我 select 第二个下拉列表中的一个项目和 go 返回更改第一个下拉列表时，它会抛出错误，下拉列表需要一个具有相应值的项目。 找到 0 或 2 个。 我在这里迷路了。 我该如何解决这个错误？

Answer 1

这里发生的事情很简单。 假设“allbatch”具有以下值：

教员： foo ，它有 batchids： foo1, foo2, foo3

Faculty: bar ，它有 batchids: bar1, bar2, bar3。

当您在第一个下拉列表中选择 foo 时，会创建一个新的“filteredbatch”，它只包含 foo1、foo2、foo3。 然后，您在第二个下拉列表中选择 foo3，一切仍然正常...

但是，当您将第一个下拉列表更改为 bar 时，“filteredbatch”仅包含：bar1、bar2、bar3 并且您的第二个下拉值仍设置为 foo3，而在新生成的“filteredbatch”中找不到该值，然后您会得到你看到的错误。

要解决此问题，只需在更改第一个下拉菜单 onChanged 方法中的“filteredbatch”之前将 batchId 设置为 null：

  setState(() {
    //fix
    batchId = null;
    //end of fix
    filteredbatch.clear();
    facultyId = newValue;
    for (var item in allbatch) {
      if (item['facultyId'].toString() == newValue){
      filteredbatch.add(item);
        disableBatch = false;
      }
    }
  });

您的第二个下拉列表将恢复为提示文本，应用程序用户必须选择一个新的 batchId。

如果您有更多问题，请随时提出。

Answer 2

Flutter 下拉按钮 FormField 依赖

List<String> dataList = ["A", "B", "C"];
    List<String> dataListA = ["A1", "A2", "A3", "A4", "A5"];
    List<String> dataListB = ["B1", "B2", "B3", "B4", "B5"];
    List<String> dataListC = ["C1", "C2", "C3", "C4", "C5"];
    
    String? valueItem;
    List<String> listItem = [];


// DropdownButtonFormField
Container(
  margin: const EdgeInsets.only(bottom: p20),
  child: DropdownButtonFormField<String>(
  decoration: InputDecoration(
  labelText: 'Data list',
  labelStyle: const TextStyle(),
  border: OutlineInputBorder(
  borderRadius: BorderRadius.circular(5.0)),
  contentPadding: const EdgeInsets.only(left: 5.0),),
  value: valueItem,
  isExpanded: true,
  items: dataList.map((String value) {
   return DropdownMenuItem<String>(
   value: value,
  child: Text(value),);
 }).toSet().toList(),
  onChanged: (value) {
   setState(() {
         valueItem= value!;
       if (valueItem=="A") {
          listItem= dataListA;
      } else if (valueItem== "B") {
         listItem= dataListB;
      } else if (valueItem== "C") {
      listItem= dataListC;
    }
  });
},

), ),

// Second DropdownButtonFormField
Container(
  margin: const EdgeInsets.only(bottom: p20),
  child: DropdownButtonFormField<String>(
  decoration: InputDecoration(
  labelText: 'List dependent',
  labelStyle: const TextStyle(),
  border: OutlineInputBorder(
  borderRadius: BorderRadius.circular(5.0)),
  contentPadding: const EdgeInsets.only(left: 5.0),),
  value: ListItem,
  isExpanded: true,
  items: listItem.map((String value) {
   return DropdownMenuItem<String>(
    value: value,
    child: Text(value),
  );}).toSet().toList(),
  onChanged: (value) {
   setState(() {
     your_value = value!;
  });
 },

), ),