flutter 列表下拉框加搜索

1.使用控件搜索加下拉框dropdown_search: ^0.4.9和获取中文拼音lpinyin: ^1.1.1

2.加入中文查询和首字查询

当中找到相应的packages,再在SelectDialog.dart当中加入引入拼音搜索

import 'package:lpinyin/lpinyin.dart';

更改匹配方法manageItemsByFilter使其可以支持拼音首字搜索

void manageItemsByFilter(String filter, {bool isFistLoad = false}) async {
    _loadingNotifier.value = true;

    List<T> applyFilter(String filter) {
      return _items.where((i) {
        if (widget.filterFn != null)
          return (widget.filterFn(i, filter));
        else if (widget.itemAsString != null) {
          if(filter.contains(new RegExp('^[a-zA-Z]+'))){
            return (PinyinHelper.getFirstWordPinyin(widget.itemAsString(i)))
                ?.toLowerCase()
                ?.contains(filter.toLowerCase()) ??
                false;
          }else{
            return (widget.itemAsString(i))
                ?.toLowerCase()
                ?.contains(filter.toLowerCase()) ??
                false;
          }

        }
        else if (i.toString().toLowerCase().contains(filter.toLowerCase()))
          return true;
        return false;
      }).toList();
    }

    //load offline data for the first time
    if (isFistLoad && widget.items != null) _items.addAll(widget.items);

    //manage offline items
    if (widget.onFind != null && (widget.isFilteredOnline || isFistLoad)) {
      try {
        final List<T> onlineItems = List();
        onlineItems.addAll(await widget.onFind(filter) ?? List());

        //Remove all old data
        _items.clear();
        //add offline items
        if (widget.items != null) {
          _items.addAll(widget.items);
          //if filter online we filter only local list based on entred keyword (filter)
          if (widget.isFilteredOnline == true) {
            var filteredLocalList = applyFilter(filter);
            _items.clear();
            _items.addAll(filteredLocalList);
          }
        }
        //add new online items to list
        _items.addAll(onlineItems);

        _addDataToStream(applyFilter(filter));
      } catch (e) {
        _addErrorToStream(e);
        //if offline items count > 0 , the error will be not visible for the user
        //As solution we show it in dialog
        if (widget.items != null && widget.items.isNotEmpty) {
          _showErrorDialog(e);
          _addDataToStream(applyFilter(filter));
        }
      }
    } else {
      _addDataToStream(applyFilter(filter));
    }

    _loadingNotifier.value = false;
  }

3.使用

DropdownSearch<User>(
              items: nurses,      //user集合
              maxHeight: 300,
              selectedItem: selectUser(val),   //通过id查到对应的user类
              itemAsString: (User u) => u.name,  //显示user的名字
              onChanged: (value){
                onDropChange(value.id);
              },
              showSearchBox: true,
              showAsSuffixIcons: true,
            )

相关推荐

  1. Ant Design Vue 搜索

    2024-07-12 19:08:04       36 阅读
  2. NC65 设置列表

    2024-07-12 19:08:04       23 阅读
  3. element-ui select 做成载更多

    2024-07-12 19:08:04       36 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-12 19:08:04       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-12 19:08:04       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-12 19:08:04       58 阅读
  4. Python语言-面向对象

    2024-07-12 19:08:04       69 阅读

热门阅读

  1. 常见的load_file()读取的敏感信息

    2024-07-12 19:08:04       22 阅读
  2. tomcat的介绍与优化

    2024-07-12 19:08:04       21 阅读
  3. Elasticsearch实战指南:从下载到高级应用全解析

    2024-07-12 19:08:04       21 阅读
  4. python .join用法

    2024-07-12 19:08:04       18 阅读
  5. 力扣995.K连续位的最小翻转次数

    2024-07-12 19:08:04       22 阅读
  6. ubuntu cp 命令 拷贝文件

    2024-07-12 19:08:04       20 阅读
  7. 探索 Scikit-Learn:机器学习的强大工具库

    2024-07-12 19:08:04       19 阅读
  8. C# —— try catch

    2024-07-12 19:08:04       15 阅读
  9. 机器学习 - one-hot编码技术

    2024-07-12 19:08:04       21 阅读
  10. 【人生苦短,我学 Python】(15)迭代器、生成器

    2024-07-12 19:08:04       23 阅读
  11. hot100 | 十、回溯

    2024-07-12 19:08:04       21 阅读
  12. Eureka: Netflix开源的服务发现框架

    2024-07-12 19:08:04       19 阅读
  13. Gradle 介绍

    2024-07-12 19:08:04       15 阅读
  14. tomcat

    2024-07-12 19:08:04       14 阅读
  15. 【jxls 单元格合并】

    2024-07-12 19:08:04       16 阅读
  16. 基于Hadoop的区块链海量数据存储的设计与实现

    2024-07-12 19:08:04       21 阅读
  17. 1 HTML and CSS

    2024-07-12 19:08:04       18 阅读