从dropdownmenu到dropdownsearch in flutter

我在我的项目中使用普通的菜单，从我的API中获取少量数据，但现在我有菜单，可以达到数百个值，很难选择一个项目。这就是为什么我想使用DropDownSearch，但我得到了一个错误
工作非常好的正常的JavaScript代码

DropdownButton(
              showSearchBox: true,
              showSelectedItem: true,
              items: data3.map((item) {
                return new DropdownMenuItem(
                  child:  Text(item['first_name']+" "+ item['last_name']),
                  value: item['emp_code'].toString(),
                );
              }).toList(),
              onChanged: (newVal) {
                setState(() {
                  _mySelection3 = newVal.toString();
                });
              },
              value: _mySelection3,
            ),

data3 = [{emp_code：111，first_name：adnen，last_name：hamouda}，{emp_code：666，first_name：ahmed，last_name：ahmed 99}...
这就是结果：normal dropdown
但是当我试图将其转换为dropDownSearch时，我得到了这样的结果：search dropdown我想像普通的JavaScript那样显示first_name和last_name，但要保存它们的“emp_code”值，稍后我会在另一个API中使用它们。我该怎么补救？

DropdownSearch(
              mode: Mode.DIALOG,
              showSearchBox: true,
              items: data3.map((item) {
                return new DropdownMenuItem(
                  child:  Text(item['first_name']+" "+ item['last_name']),
                  value: item['emp_code'].toString(),
                );
              }).toList(),
              onChanged: (newVal) {
                setState(() {
                  print(data3);
                  _mySelection3 = newVal.toString();
                });
              },
              selectedItem: _mySelection3,

            ),

下面是我发现的使用可搜索列表的方法。
我尝试dropdown_search包在第一，但它似乎与最新版本（5.0.2）相关的文档和示例是贬值.后来，我转向了dropdown_button2，我很高兴DropdownButtonFormField2的实现方式，因为到目前为止，它与flutter DropdownButtonFormField的实现非常相似。
看看Flutter捆绑的DropdownButtonFormField示例：

return DropdownButtonFormField<SetorTemp>(
                    decoration: const InputDecoration(
                        labelText: 'Setor institucional'),
                    isExpanded: true,
                    icon: const Icon(Icons.arrow_downward),
                    items: snapshot.data!
                        .map((SetorTemp rtItem) =>
                            DropdownMenuItem<SetorTemp>(
                              value: rtItem,
                              child: Text(
                                '${rtItem.nome} (${rtItem.sigla})',
                                softWrap: true,
                              ),
                            ))
                        .toList(),
                    hint: Text(
                        '${selectedSetorTemp.nome} (${selectedSetorTemp.sigla})'),
                    onChanged: (SetorTemp? newValue) {
                      setState(() {
                        // do your logic here!
                        selectedSetorTemp = newValue;
                      });
                    },
                  );

和使用dropdown_button2包的DropdownButtonFormField2

return DropdownButtonFormField2<SetorTemp>(
                    decoration: const InputDecoration(
                        labelText: 'Setor institucional'),
                    isExpanded: true,
                    icon: const Icon(Icons.arrow_downward),
                    items: snapshot.data!
                        .map((SetorTemp rtItem) =>
                            DropdownMenuItem<SetorTemp>(
                              value: rtItem,
                              child: Text(
                                '${rtItem.nome} (${rtItem.sigla})',
                                softWrap: true,
                              ),
                            ))
                        .toList(),
                    hint: Text(
                        '${selectedSetorTemp.nome} (${selectedSetorTemp.sigla})'),
                    onChanged: (SetorTemp? newValue) {
                      setState(() {
                        // Do your logic here!
                        selectedSetorTemp = newValue;
                      });
                    },
                    // Search implementation using dropdown_button2 package
                    searchController: searchContentSetor,
                    searchInnerWidget: Padding(
                      padding: const EdgeInsets.only(
                        top: 8,
                        bottom: 4,
                        right: 8,
                        left: 8,
                      ),
                      child: TextFormField(
                        controller: searchContentSetor,
                        decoration: InputDecoration(
                          isDense: false,
                          contentPadding: const EdgeInsets.symmetric(
                            horizontal: 8,
                            vertical: 8,
                          ),
                          labelText: 'Setor institucional',
                          hintText: 'Parte do nome do setor...',
                          counterText: '',
                          hintStyle: const TextStyle(fontSize: 16),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8),
                          ),
                        ),
                      ),
                    ),
                    searchMatchFn: (rtItem, searchValue) {
                      return (rtItem.value.nome
                          .toLowerCase()
                          .contains(searchValue.toLowerCase()));
                    },
                    //This to clear the search value when you close the menu
                    onMenuStateChange: (isOpen) {
                      if (!isOpen) {
                        searchContentSetor.clear();
                      }
                    },
                  );

它们起初是相似的：

但是，单击后，它们将显示与初始实现的差异：

到dropdown_button2包：

selectedSetorTemp变量的类型是SetorTemp，我使用的模型是：

class SetorTemp {
  final int id;
  final String? nome;
  final String? sigla;
  SetorTemp({required this.id, this.nome, this.sigla});

  factory SetorTemp.fromJson(Map<String, dynamic> json) {
    return SetorTemp(
      id: json['id'] as int,
      nome: json['nome'] as String,
      sigla: json['sigla'] as String,
    );
  }

  Map<String, dynamic> toJson() => {
        'nome': nome,
        'sigla': sigla,
      };
}

从dropdownmenu到dropdownsearch in flutter

1条答案

相关问题

热门标签

最新问答