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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter中,可以使用DropdownButtonFormField或自定义的SelectWidget来创建下菜单。引用\[1\]中的代码演示了如何使用自定义的SelectWidget来创建下菜单。在SelectWidget中,通过传入一个MenuItem列表来定义下菜单的选项,然后通过value属性来指定当前选中的值,通过valueChanged回调函数来处理选中值的改变。 引用\[2\]中的代码演示了如何使用DropdownButtonFormField来创建下菜单。在DropdownButtonFormField中,通过value属性来指定当前选中的值,通过items属性来定义下菜单的选项,通过onChanged回调函数来处理选中值的改变。 如果你想创建一个通用的菜单项类,可以参考引用\[3\]中的代码。MenuItem类包含了显示的文本label、选中的值value和是否选中的checked属性,可以根据需要进行自定义。 所以,根据你的问题,你可以使用自定义的SelectWidget或者DropdownButtonFormField来创建Flutter框。 #### 引用[.reference_title] - *1* *3* [flutter实现下菜单组件——基于PopupMenuButton](https://blog.csdn.net/weixin_39033300/article/details/130456842)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [flutter实现下框功能——基于DropdownButtonFormField](https://blog.csdn.net/weixin_39033300/article/details/130291685)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值