Flutter 仿搜索引擎模糊搜索框案例实现
前言
各位同学大家好，有段时间没有给大家更新文章了，趁着有时间就写了一个模仿搜索引擎做的一个flutter版本的模糊搜索框案例，分享给大家，如果有错误和纰漏地方希望大家及时指出，那么废话不多说，我们正式开始
准备工作
需要安装flutter的开发环境：大家可以去看看之前的教程：
1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3
效果图：
搜索框主页.png
Screenrecorder-2020-10-19-10-26-07-874[00_00_03--00_00_23].gif
screenrecorder-2020-10-19-10-34-25-381[00_00_00--00_00_20].gif
具体实现：
搜索框主页.png
首先是首页我们 写了一个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显示。
模糊搜索框实现
Screenrecorder-2020-10-19-10-26-07-874[00_00_03--00_00_23].gif
搜索框我们这边是写了一个组件继承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 搜索结果方法：
QQ截图20201019114216.png
@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，小弟在这里谢过啦
