从下拉菜单到颤振中的下拉搜索

Question

我在我的项目中使用普通的下拉菜单，从我的 api 获取少量数据，但现在我的菜单可以达到数百个值，并且很难选择一个项目。 这就是为什么我想使用 DropDownSearch 但出现错误

正常的下拉代码，效果很好

 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，名字：adnen，姓氏：hamouda}，{emp_code：666，名字：ahmed，姓氏：ahmed 99}....

这就是结果：

但是当我尝试将其转换为 dropDownSearch 时，我得到了这个结果： 我想像普通下拉列表一样显示名字和姓氏，但保存它们的“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,

            ),

Answer 1

这是我发现使用可搜索下拉列表的方法。

我首先尝试了 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,
      };
}

Answer 2

尝试使用dropdown_search它是我迄今为止发现的最好的下拉搜索