Question

因此，现在我有一个从api获取的下拉列表。这是我的工作

  Future<String> getSWData() async {
    var res = await http.get(
        Uri.encodeFull(Configuration.url + "api/getCategories"),
        headers: {"Accept": "application/json"});
    var resBody = json.decode(res.body);
    setState(() {
      data = resBody;
    });
    print(data);
    return "Sucess";
  }

那么这就是我在下拉菜单中使用它的方式

DropdownButtonHideUnderline(
      child: new DropdownButton(
      hint: new Text("Choose Category"),
      items: data.map((item) {
      return new DropdownMenuItem(
      child: new Text(item['categoryName']),
      value: item['categoryId'].toString(),
     );
  }).toList(),
  onChanged: (newVal) {
              setState(() {
                 mySelection = newVal;
             });
},
  value: _mySelection, ),),

一切正常，但是现在我想在下拉列表中添加All Category作为选项，我如何实现呢？预先感谢

Answer 1

您的DropdownButton项目是一个列表，因此您可以使用..add

添加到该列表中

   DropdownButtonHideUnderline(
          child: new DropdownButton(
          hint: new Text("Choose Category"),
          items: data.map((item) {
          return new DropdownMenuItem(
          child: new Text(item['categoryName']),
          value: item['categoryId'].toString(),
         );
      }).toList()
      ..add(DropdownMenuItem(child: Text("All Category"), value: 'allcategory')),
      onChanged: (newVal) {
                  setState(() {
                     mySelection = newVal;
                 });
    },
      value: _mySelection, ),),

Answer 2

您可以使用Cascade运算符

References

此解决方案的效果是“所有类别”项将排在最后。

您可以在getSWData（）中添加“所有类别”项。

DropdownButtonHideUnderline(
      child: new DropdownButton(
      hint: new Text("Choose Category"),
      items: data..add({
         'categoryName': 'All Categories', 
         'categoryId': 'AllCategories',
      }).map((item) {
      return new DropdownMenuItem(
      child: new Text(item['categoryName']),
      value: item['categoryId'].toString(),
     );
  }).toList(),
  onChanged: (newVal) {
              setState(() {
                 mySelection = newVal;
             });
},
  value: _mySelection, ),),

我建议第二种方法，您将获得更好的可读性代码。

如何为我的下拉菜单添加自定义选项？

2 个答案: