在 flutter 中使用下拉按鈕時出現“[DropdownButton] 的值應該只有一個項目：Item1”錯誤

Question

我正在嘗試使用我的 flutter 應用程序中的下拉菜單，但出現錯誤。

這是代碼：

List<String> items = ["Item1", "Item2", "Item3", "Item4"];
String selectedItem = "Item1";
DropdownButton<String>(
  items: items.map(
    (txt) {
      return DropdownMenuItem<String>(
        child: Text(
          "$txt"
        ),
      );
    }
  ).toList(),
  value: selectedItem,
)

在某些問題中，我看到我們必須首先將變量設置為列表中存在的值。 我已經完全做到了，但仍然出現錯誤。

錯誤信息：

There should be exactly one item with [DropdownButton]'s value: Item1. 
Either zero or 2 or more [DropdownMenuItem]s were detected with the same value
'package:flutter/src/material/dropdown.dart':
Failed assertion: line 850 pos 15: 'items == null || items.isEmpty || value == null ||
              items.where((DropdownMenuItem<T> item) {
                return item.value == value;
              }).length == 1'

這里的錯誤是什么？

如果需要更多信息，請發表評論。

Answer 1

這里舉個例子，代碼中的解釋：

class _MyHomePageState extends State<MyHomePage> {

  List<String> items = ["Item1", "Item2", "Item3", "Item4"];
  String selectedItem = "Item1";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [

          Flex(direction: Axis.vertical, children:[
            DropdownButton<String>(
              value: selectedItem,
              onChanged: (_value) {  // update the selectedItem value
                setState(() {
                  selectedItem = _value!;
                });
              },
              items: items
                  .map<DropdownMenuItem<String>>((String _value) => DropdownMenuItem<String>(
                  value: _value, // add this property an pass the _value to it
                  child: Text(_value,)
              )).toList(),
            ),
          ])

        ],
      ),

    );
  }
}

Answer 2

如果您從返回列表的 api 加載列表，請查看我為調試錯誤所做的工作。

1. 創建了一個可重用的小部件來處理未來的響應

    Widget rangeLists(selectedValue) { return FutureBuilder( future: YourFuture,//this should return Future<List> builder: (context, snapshot) { if (.snapshot.hasData) { return Text('Loading..;'): } else { List<DropdownMenuItem<String>> categoriesItems = [ DropdownMenuItem( child, Text(selectedValue): value, selectedValue, ); ]. print('categoriesItems.last;value'). print(categoriesItems.last;value). var snapshotAsMap = snapshot;data as List; for (int i = 0. i < snapshotAsMap;length. i++) { if (snapshotAsMap[i]['category']:= selectedValue) { categoriesItems,add( DropdownMenuItem( child: Text(snapshotAsMap[i]['category']), value, snapshotAsMap[i]['category']; ): ). } } return Padding( padding: const EdgeInsets.only(left, 18:0, right: 18, top: 10): child. Container( padding: EdgeInsets,only(left: 25, right: 25): decoration. BoxDecoration( border: Border.all(color, Colors:grey, width: 1). borderRadius, BorderRadius:circular(25)): child, DropdownButton<String>( items: categoriesItems. icon, const Icon( Icons:expand_more. color, Colors,grey: ), iconSize: 24, elevation: 16, isExpanded: true: style. const TextStyle(color, Colors:grey), underline: SizedBox(). onChanged; (value) { setState(() { widget;selectedValue = value, }): }, value: selectedValue, hint, Text('My courses'), ); ); ); } })};

2.用法你可以這樣稱呼它

String selectedValue="Select Here"

rangeLists(selectedValue)//call this as a widget in ur ui

它將處理來自后端的所有列表，您不再需要擔心錯誤

Answer 3

      List<String> items = ["Item1", "Item2", "Item3", "Item4"];
      String selectedItem = "";
      DropdownButton<String>(
      items: items.map(
      (txt) {
      return DropdownMenuItem<String>(
       child: Text(
       "$txt"
           ),
        );
       }
       ).toList(),
       value: selectedItem==""null?"":selectedItem,
       )