Flutter 实现简单搜索功能
先建立一个主文件,继承StatelessWidget
,然后在home属性中加入SearchBarDemo
,这是一个自定义的Widget,主要代码都在这个文件中。
import 'package:flutter/material.dart';
import 'search_bar_demo.dart'; void main() =>runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title:'Flutter Demo',
theme: ThemeData.light(),
home: SearchBarDemo()
);
}
}
然后是搜索页面,里面包含数据及搜索功能。
工作中这些数据是后台传递给我们,或者写成配置文件的,这里我们就以List的方式代替了。我们在这个文件中定义了两个List:
const searchList = [
'jiejie-大长腿',
'jiejie-水蛇腰',
'gege-帅气欧巴',
'gege-小鲜肉'
]; const recentSuggest = [
'推荐-1',
'推荐-2',
];
点击搜索按钮
class SearchBarDemo extends StatefulWidget {
_SearchBarDemoState createState() => _SearchBarDemoState();
} class _SearchBarDemoState extends State<SearchBarDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SearchBarDemo'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: (){
showSearch(context: context,delegate: SearchBarDelegate());
},
)
],
), );
}
}
在点击图标时执行SearchBarDelegate
类,这个类继承与SearchDelegate
类,继承后要重写里边的四个方法。
重写buildActions方法:
buildActions
方法时搜索条右侧的按钮执行方法,我们在这里方法里放入一个clear图标。 当点击图片时,清空搜索的内容。
buildLeading 方法重写
这个时搜索栏左侧的图标和功能的编写,这里我们才用AnimatedIcon
,然后在点击时关闭整个搜索页面。
buildResults方法重写
buildResults
方法,是搜到到内容后的展现,因为我们的数据都是模拟的,所以我这里就使用最简单的Container
+Card
组件进行演示了。
buildSuggestions方法重写
这个方法主要的作用就是设置推荐,就是我们输入一个字,然后自动为我们推送相关的搜索结果。
class SearchBarDelegate extends SearchDelegate<String>{
//清空按钮
@override
List<Widget>buildActions(BuildContext context){
return [
IconButton(
icon: Icon(Icons.clear),
onPressed: () => query = "", //搜索值为空
)
];
}
//返回上级按钮
@override
Widget buildLeading(BuildContext context) {
return IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow, progress: transitionAnimation
),
onPressed: () => close(context, null) //点击时关闭整个搜索页面
);
}
//搜到到内容后的展现
@override
Widget buildResults(BuildContext context){
return Container(
width: 100.0,
height:100.0,
child: Card(
color:Colors.redAccent,
child: Center(
child: Text(query),
),
),
);
}
//设置推荐
@override
Widget buildSuggestions(BuildContext context){
final suggestionsList= query.isEmpty
? recentSuggest
: searchList.where((input)=> input.startsWith(query)).toList(); return ListView.builder(
itemCount:suggestionsList.length,
itemBuilder: (context,index) => ListTile(
title: RichText( //富文本
text: TextSpan(
text: suggestionsList[index].substring(,query.length),
style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold),
children: [
TextSpan(
text: suggestionsList[index].substring(query.length),
style: TextStyle(color: Colors.grey)
)
]
),
),
),
);
} }
完整的search_bar_demo.dart文件代码如下:
import 'package:flutter/material.dart'; const searchList = [
'jiejie-大长腿',
'jiejie-水蛇腰',
'gege-帅气欧巴',
'gege-小鲜肉'
]; const recentSuggest = [
'推荐-1',
'推荐-2',
]; class SearchBarDemo extends StatefulWidget { _SearchBarDemoState createState() => _SearchBarDemoState();
} class _SearchBarDemoState extends State<SearchBarDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SearchBarDemo'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: (){
showSearch(context: context,delegate: SearchBarDelegate());
},
)
],
), );
}
} class SearchBarDelegate extends SearchDelegate<String>{
//清空按钮
@override
List<Widget>buildActions(BuildContext context){
return [
IconButton(
icon: Icon(Icons.clear),
onPressed: () => query = "", //搜索值为空
)
];
}
//返回上级按钮
@override
Widget buildLeading(BuildContext context) {
return IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow, progress: transitionAnimation
),
onPressed: () => close(context, null) //点击时关闭整个搜索页面
);
}
//搜到到内容后的展现
@override
Widget buildResults(BuildContext context){
return Container(
width: 100.0,
height:100.0,
child: Card(
color:Colors.redAccent,
child: Center(
child: Text(query),
),
),
);
}
//设置推荐
@override
Widget buildSuggestions(BuildContext context){
final suggestionsList= query.isEmpty
? recentSuggest
: searchList.where((input)=> input.startsWith(query)).toList(); return ListView.builder(
itemCount:suggestionsList.length,
itemBuilder: (context,index) => ListTile(
title: RichText( //富文本
text: TextSpan(
text: suggestionsList[index].substring(,query.length),
style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold),
children: [
TextSpan(
text: suggestionsList[index].substring(query.length),
style: TextStyle(color: Colors.grey)
)
]
),
),
),
);
} }
Flutter 实现简单搜索功能的更多相关文章
- asp.net mvc 简单搜索功能
View中代码: <input type="text" class="searchText" id="searchText"/> ...
- PHP 实现简单搜索功能
方案:问答搜索 1. 搜索结果列表,高亮显示搜索关键词内容 2. 用户输入内容,点击搜索 2.1 获取用户的搜索内容: 2.2 调用分词服务,获取对搜索内容的分词: ...
- ElasticSearch(五):简单的ElasticSearch搜索功能
这里主要是一些简单的ElasticSearch的搜索功能,复杂的搜索,比如过滤,聚合等以后单独在写 1. 搜索全部 GET book/_search 直接搜索全部,下面是对搜索结果的详细介绍:默认情况 ...
- jQuery实现简单前端搜索功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue下简单分页及搜索功能
最近利用Vue和element ui仿写了个小页面,记一哈分页和搜索功能的简单实现. 首页 emmmm..... 搜索框输入..... 搜索完成 数据是直接写在这里面的: cardPhoto:[ ...
- jquery实现简单的搜索功能
管理系统中需要实现导航列表的搜索功能,写了一个简单的小栗子: <!DOCTYPE html> <html lang="en"> <head> & ...
- 简单三步-实现dede站内搜索功能
第一步:找到对应的搜索模板的代码 我们都知道,dede有自带的搜索功能,我们只要找到对应的模板,然后把我们想要的代码拿出来就行了.具体如下: 首先进入templets-->default--&g ...
- 【老孟Flutter】Flutter 2的新功能
老孟导读:昨天期待已久的 Flutter 2.0 终于发布了, Flutter Web和Null安全性趋于稳定,Flutter桌面安全性逐渐转向Beta版! 原文链接:https://medium.c ...
- ElasticSearch 5学习(4)——简单搜索笔记
空搜索: GET /_search hits: total 总数 hits 前10条数据 hits 数组中的每个结果都包含_index._type和文档的_id字段,被加入到_source字段中这意味 ...
随机推荐
- Vue入门——v-if和v-show
v-if 特点:每次都会重新删除或创元素 有较高的切换性能消耗 v-show 特点:每次不会重新进行DOM的删除和创建操作,只是切换了元素的display:none样式 有较高的初始渲染消耗
- SpringBoot 项目启动 Failed to convert value of type 'java.lang.String' to required type 'cn.com.goldenwater.dcproj.dao.TacPageOfficePblmListDao';
org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'tac ...
- 转 java 中int String类型转换
转自licoolxue https://blog.csdn.net/licoolxue/article/details/1533364 int -> String int i=12345;Str ...
- Python中的memoryview
Python中的memoryview提供了类似C语言指针的功能,有了memoryview,如果某个Object支持buffer protocol,那么就可以通过memory去访问到他的内部. Pyth ...
- 使用jaxb用xsd生成java类
命令: xjc -p 包的路径 xsd的名字.xsd -d 目标的文件夹 具体详细见: http://www.iteye.com/topic/1118082
- 怎奈风云多变换,骚完一波还一波,记PHP mongodb驱动的2019年11月用法
怎么,觉得pecl下一个扩展包,phpize make make install php.ini里引用一下 mongodb.so就万事大吉了? Deeply Sorry!看到MongoDB\Driv ...
- jQuery和原生JS的对比
原生JS的缺点: 不能添加多个入口函数(window.onload),如果添加了多个,后面的会把前面的覆盖掉 原生js的api名字太长,难以书写,不易记住 原生js有的代码冗余 原生js中的属性或者方 ...
- 二进制文件方式安装kubernetes集群
所有操作全部用root使用者进行,高可用一般建议大于等于3台的奇数,我们使用3台master来做高可用 练习环境说明: 参考GitHub master: kube-apiserver,kube-con ...
- phpweb文件上传下载
PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...
- UCOSIII(一)
一,前后台系统和RTOS 1,前后台系统 早期嵌入式开发没有嵌入式操作系统的概念 ,直接操作裸机,在裸机上写程序,比如用51单片机基本就没有操作系统的概念.通常把程序分为两部分:前台系统和后台系统. ...