博客地址:

https://jspang.com/post/flutterDemo.html#toc-1b4

视频地址:https://www.bilibili.com/video/av39709290/?p=11

定义类searchBarDelegate

继承SearhDelegate 并复写里面的方法

需要复写里面的四个方法。我们定义类:searchBarDelegate

重写第一个方法 buildActions

重写的第一个方法:buildActions 就是搜索的时候右边的差号。里面接收 一个上下文。一般我们返回一个IconButton

query就是我们搜索的参数。我们设置为空。

点击事件,一点击的时候就把搜索内容设置为空

第二个方法buildLeading

复写第二个方法:就是最左侧我们返回的箭头

下图中的build单词拼错了后续已经改正过来

重写第三个方法:buildResults

再重写我们的搜索结果:buildResults

我们返回Container容器。child里面放Card组件,为了让搜索结果好看一点

为了Card卡片变得好看一些,我们给它一个亮红色

重写第四个方法buildSuggestions

再重写最重要的一个方法:

用户一边搜索一般提示用户的内容;

这里我们采用三元运算符的方式

效果展示

最终代码

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()
);
}
}

main.dart

import 'package:flutter/material.dart';
import 'asset.dart'; class SearchBarDemo extends StatefulWidget {
@override
_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),//关闭context上下文
);
}
@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 build)
{
final suggestionList=query.isEmpty
? recentSuggest
:searchList.where((input)=> input.startsWith(query)).toList();
//这里发返回动态列表
return ListView.builder(
itemCount: suggestionList.length,
itemBuilder: (contex,index)=> ListTile(
title: RichText(//这里使用富文本
text: TextSpan(
text: suggestionList[index].substring(,query.length),//截取搜索的关键的长度
style: TextStyle(//截取的字给他一个黑色字体样式,并加粗
color: Colors.black,fontWeight: FontWeight.bold
),
children: [
TextSpan(
text: suggestionList[index].substring(query.length),
style: TextStyle(color: Colors.grey)
)
]
),
),
),
);
}
}

search_bar_demo.dart

const searchList=[
"jiejie-大长腿",
"jiejie-水蛇腰",
"gege-帅气欧巴",
"gege-小鲜肉",
];
//默认的数组
const recentSuggest=[
"推荐-1",
"推荐-2"
];

asset.dart

20个Flutter实例视频教程-第11节: 一个不简单的搜索条-2的更多相关文章

  1. 20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1

    20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1 视频地址: https://www.bilibili.com/video/av39709290/?p=10 博客地址: https ...

  2. 20个Flutter实例视频教程-第13节: 展开闭合案例

    20个Flutter实例视频教程-第13节: 展开闭合案例 视频地址: https://www.bilibili.com/video/av39709290/?p=13 博客地址: https://js ...

  3. 20个Flutter实例视频教程-第03节: 不规则底部工具栏制作-1

    第03节: 不规则底部工具栏制作-1 博客地址: https://jspang.com/post/flutterDemo.html#toc-973 视频地址: https://www.bilibili ...

  4. 20个Flutter实例视频教程-第05节: 酷炫的路由动画-1

    视屏地址: https://www.bilibili.com/video/av39709290/?p=5 博客地址: https://jspang.com/post/flutterDemo.html# ...

  5. 20个Flutter实例视频教程-第02节: 底部导航栏制作-2

    视频地址: https://www.bilibili.com/video/av39709290?p=2 博客地址: https://jspang.com/post/flutterDemo.html#t ...

  6. 20个Flutter实例视频教程-第04节: 不规则底部工具栏制作-2

    视频地址: https://www.bilibili.com/video/av39709290/?p=4 博客地址: https://jspang.com/post/flutterDemo.html# ...

  7. 20个Flutter实例视频教程-第06节: 酷炫的路由动画-2

    博客地址: https://jspang.com/post/flutterDemo.html#toc-94f 视频地址: https://jspang.com/post/flutterDemo.htm ...

  8. 20个Flutter实例视频教程-第07节: 毛玻璃效果制作

    视频地址: https://www.bilibili.com/video/av39709290/?p=7 博客地址: https://jspang.com/post/flutterDemo.html# ...

  9. 20个Flutter实例视频教程-第08节: 保持页面状态

    博客地址: https://jspang.com/post/flutterDemo.html#toc-bb9 视频地址: https://www.bilibili.com/video/av397092 ...

随机推荐

  1. mdadm

    http://en.wikipedia.org/wiki/Mdadm mdadm From Wikipedia, the free encyclopedia     mdadm Original au ...

  2. kubernetes之多容器pod以及通信

    系列目录 容器经常是为了解决单一的,窄范围的问题,比如说微服务.然而现实中,一些复杂问题的完成往往需要多个容器.这里我们讨论一下如何把多个容器放在同一个pod里以及容器间的通信 什么是pod pod是 ...

  3. [框架安装趟雷指南]Ubuntu+1060+cuda+cudnn+Keras+TH+TF+MXnet

    [框架安装趟雷指南]Ubuntu+1060+cuda+cudnn+Keras+TH+TF+MXnet https://zhuanlan.zhihu.com/p/23480983 天清 9 个月前 写这 ...

  4. SecureCRT 7.0 如何自动记录日志

    设置步骤如下: 1.打开SecureCRT ,在菜单里选择“选项”-->“全局选项”    2.然后选择“常规”--> “默认会话”--> “编辑默认设置”    3.然后选择“日志 ...

  5. Android-addToBackStack使用和Fragment执行流程

    文章来源:https://blog.csdn.net/wenxuzl99/article/details/16112725 在使用Fragment的时候我们一般会这样写: FragmentTransa ...

  6. php 面向对象的三大要素(封装、继承、多态)以及重写(override)和重载(overload)的举例说明

    PHP是一种HTML内嵌式的,用来制作动态网页的服务器端的脚本语言.其特点是:开发周期短,稳定安全,简单易学,免费开源,良好的跨平台特性.PHP是一种面向对象的程序设计语言,目前已成为全球最受欢迎的五 ...

  7. mac 权限问题

    终端输入sudo chown -R zjtc /usr/local

  8. IE浏览器 get请求缓存问题

    场景: 比较简单是使用的SpringMVC框架,在做资源国际化的时候,遇到了这个问题.具体做的操作是在页面上点击切换语言的时候,需要发起请求在Controller中切换Locale. 问题: 1.开始 ...

  9. JQery 动态填充数据到table 中

    说明: 1.把数据库中的数据查询出来,填充到前台的table中,注意 从数据查询出来的 属性IsNew="0"(table 行tr的属性) 2.单击“添加”按钮 新添加行追加到ta ...

  10. 九度OJ 1106:数字之和 (基础题)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2505 解决:1706 题目描述: 对于给定的正整数 n,计算其十进制形式下所有位置数字之和,并计算其平方的各位数字之和. 输入: 每行输入 ...