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!;
  });
 },

), ),