如何在Flutter中添加json列表项到下拉搜索项|飞镖

cig3rfwq  于 2022-11-25  发布在  Flutter
关注(0)|答案(4)|浏览(138)

我正在创建一个带有搜索功能的下拉按钮。所以我使用了this包。这个包有问题。API的响应如下。

List countries = [
    {
      'id': '1',
      'name': 'Brazil',
    },
    {
      'id': '2',
      'name': 'India',
    },
    {
      'id': '3',
      'name': 'Japan',
    },
    {
      'id': '4',
      'name': 'Tokyo',
    },
    {
      'id': '5',
      'name': 'Australia',
    },
    {
      'id': '6',
      'name': 'Srilanka',
    },
    {
      'id': '7',
      'name': 'Canada',
    },
  ];

我的下拉代码是这样的,

body: Column(
        children: [
          DropdownSearch<String>(
            mode: Mode.MENU,
            items: countries['name'],
            showSearchBox: true,
            label: "Menu mode",
            hint: "country in menu mode",
            onChanged: (value){
               print(countries['name']);
            },
            selectedItem: "Canada",
          ),
        ],
      ),

这里items: countries['name']行i得到错误为The argument type 'String' can't be assigned to the parameter type 'int'.此外,当我选择一个国家,我想打印国家ID.例如:如果我选择国家为日本,那么它应该打印4在控制台。我的代码是不工作。

idfiyjo8

idfiyjo81#

首先,一个列表的Map不这样工作-〉(countries['name]),尝试替换你的items

DropdownSearch<String>(
        mode: Mode.MENU,
        items: countries.map((e)=>e['name']).toList(),
        showSearchBox: true,
        label: "Menu mode",
        hint: "country in menu mode",
        onChanged: (value){
           print(value);
        },
        selectedItem: "Canada",
      ),
liwlm1x9

liwlm1x92#

尝试下面的代码希望对你有所帮助。
请参阅我的答案here,了解如何将json数据放到下拉列表中

Padding(
              padding: const EdgeInsets.all(8.0),
              child: DropdownSearch<dynamic>(
                mode: Mode.MENU,
                items: countries.map((e) => e['name']).toList(),
                showSearchBox: true,
                label: "Menu mode",
                hint: "country in menu mode",
                onChanged: (value) {},
                selectedItem: "Canada",
              ),
            ),

您的结果屏幕-〉x1c 0d1x

muk1a3rh

muk1a3rh3#

必须创建一个数据类Country并覆盖toString函数以返回国家/地区名称。
并更新您的下拉列表Search,如下所示:

//don't forget to generate the list of countries frop the map

DropdownSearch<Country>(
        mode: Mode.MENU,
        items: yourCountries,
        showSearchBox: true,
        label: "Menu mode",
        hint: "country in menu mode",
        onChanged: (Country value){
           print(value.id);
        },
        selectedItem: Country("Canada",7),
      ),
gcmastyq

gcmastyq4#

像这样使用您自己的国家模型

DropdownSearch<Country>(
        mode: Mode.MENU,
        items: yourCountries,
        popupProps: PopupProps.dialog(
                     showSelectedItems: false,
                     showSearchBox: true,
                    ),
        showSearchBox: true,
        label: "Menu mode",
        hint: "country in menu mode",
        itemAsString: (Country u) => u.name,
        onChanged: (Country country){
           print(country.name);
           print(country.id);
        },
        selectedItem: Country("Canada",7),
      ),

不要忘记使用-〉itemAsString field
//或者
您可以访问包本身的-https://pub.dev/packages/dropdown_search#customize-showed-field-itemasstring部分

相关问题