Flutter 仿搜索引擎模糊搜索框案例实现

前言

各位同学大家好，有段时间没有给大家更新文章了，趁着有时间就写了一个模仿搜索引擎做的一个flutter版本的模糊搜索框案例，分享给大家，如果有错误和纰漏地方希望大家及时指出，那么废话不多说，我们正式开始

准备工作

需要安装flutter的开发环境：大家可以去看看之前的教程：

1 win系统flutter开发环境安装教程: ​https://www.jianshu.com/p/152447bc8718">​​https://www.jianshu.com/p/152447bc8718​​​

2 mac系统flutter开发环境安装教程：​https://www.jianshu.com/p/bad2c35b41e3">​​https://www.jianshu.com/p/bad2c35b41e3​​​

效果图：

具体实现：

首先是首页我们 写了一个appbar 然后右侧是一个搜索button 点击之后跳转到下一页的模糊搜框页面

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
     appBar: AppBar(
       title: Text("searchDemo"),
       actions: <Widget>[
         IconButton(
           icon: Icon(
             Icons.search
           ),
           onPressed: (){
             showSearch(context: context, delegate: searchBarDelegate());
           },
         )
       ],
     ),
    );
  }

我们在 appbar组件中的actions 属性中我们添加一个iconbutton来实现 右侧的搜索button的UI显示。

模糊搜索框实现

搜索框我们这边是写了一个组件继承SearchDelegate 并且重写了 buildActions buildLeading

buildResults buildSuggestions 等方法

buildActions 方法右侧删除输入框内容方法 ：

    @override
    List<Widget>buildActions(BuildContext context){
      return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: ()=>query="",
      )
      ];
    }

当我们点击右侧删除button 触发 onPressed 方法我们把输入框内容置空

buildLeading 方法左侧返回键方法

    @override
     Widget buildLeading(BuildContext context) {
     return IconButton(
       icon: AnimatedIcon(
           icon: AnimatedIcons.menu_arrow,
           progress:transitionAnimation),
       onPressed: ()=>close(context,null),
     );
  }

当我们点击左侧返回键 调用 onPressed 方法然后关闭模糊搜索页面

buildResults 搜索结果方法：

  @override
  Widget buildResults(BuildContext context) {
      return Center(
          child:Container(
              width: 100,
              height: 100,
            child:Card(
               color: Colors.redAccent,
            child: Text(query),
           ),
          ),
      );
  }

搜索结果我们 写了一个 Center 组件 然后里面嵌套一个 Container 组件设置宽高都为100单位大小 ，然后里面写了一个Card卡片组件 来美化我们的结果页面 最后我们里面嵌套text组件显示搜到的内容

这个搜索结果页面我们只是做个示例 同学们可以自由发挥

buildSuggestions 模糊搜索列表方法：

  @override
  Widget buildSuggestions(BuildContext context) {
    final suggestionList=query.isEmpty?
        reecntSuggest:serchList.where((input) => input.startsWith(query)).toList();
    return ListView.builder(
        itemCount: suggestionList.length==0?0:suggestionList.length,
        itemBuilder: (context ,index)=>ListTile(
          title: RichText(
            text: TextSpan(
              text: suggestionList[index].substring(0,query.length),
              style: TextStyle(
                color: Colors.black,fontWeight: FontWeight.bold
              ),
              children: [
                TextSpan(
                    text:suggestionList[index].substring(query.length),
                    style: TextStyle(color: Colors.grey
                    )
                )
                ]
            ),
          ),
        ),
    );
  }

我们定义一个 list数组 使用三目运算判断输入内容是否为空 为空则使用我们默认的推荐的数据显示，

不为空我们就用数据源的数据判断输入内容前缀进行匹配然后返回list

   final suggestionList=query.isEmpty?
        reecntSuggest:serchList.where((input) => input.startsWith(query)).toList();

模拟搜索死数据源

const  serchList=[
  "宇智波-斑",
  "宇智波-泉奈",
  "宇智波-鼬",
  "宇智波-=佐助",
  "千手-柱间",
  "千手-扉间",
];
const  reecntSuggest=[
    "推荐-1",
     "推荐-2"
];

显示部分我们写了一个 ListView组件显示，item我们写了一个 ListTile ，ListTile里面我们的title 我们把搜索匹配到的显示为黑色 ，通过substring 来截取 没有匹配的则显示灰色 同理通过 substring 截取显示

   return ListView.builder(
        itemCount: suggestionList.length==0?0:suggestionList.length,
        itemBuilder: (context ,index)=>ListTile(
          title: RichText(
            text: TextSpan(
              text: suggestionList[index].substring(0,query.length),
              style: TextStyle(
                color: Colors.black,fontWeight: FontWeight.bold
              ),
              children: [
                TextSpan(
                    text:suggestionList[index].substring(query.length),
                    style: TextStyle(color: Colors.grey
                    )
                )
                ]
            ),
          ),
        ),
    );

到处整个模糊搜索框内容我们就讲完了

最后总结

相对于原生安卓或者iOS flutter提供了丰富的 组件让我们继承来实现特殊需求的效果 这个模糊搜索框的 我们就是继承 SearchDelegate组件 重写 buildActions buildLeading buildResults buildSuggestions 等方法来实现的， 其中的数据源我是写死的在本地的 同学们可以找一些接口用网络请求来尝试下，我这边就不展开讲了 有兴趣的同学可以多研究下 最后希望我的文章能帮助到各位解决问题 ，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ，麻烦给关注和star，小弟在这里谢过啦 项目地址：

码云 ：https://gitee.com/qiuyu123/flutter_serchdemo