博客地址:

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. linux之return和exit引发的大问题(vfork和fork)

    在coolshell.cn上看到的一个问题.为此拿来研究一下. 首先 看看return和exit的差别 在linux上分别跑一下这个代码 int main() { return 0; //exit(0 ...

  2. 机器学习资源汇总----来自于tensorflow中文社区

    新手入门完整教程进阶指南 API中文手册精华文章TF社区 INTRODUCTION 1. 新手入门 1.1. 介绍 1.2. 下载及安装 1.3. 基本用法 2. 完整教程 2.1. 总览 2.2.  ...

  3. byte数组和文件的相互转换

    /** * 获得指定文件的byte数组 */ private byte[] getBytes(String filePath){ byte[] buffer = null; try { File fi ...

  4. unsigned double

    最近犯了一个错误: 定义变量类型的时候竟然定义了unsigned double的类型.由于编译能够通过,因此一直没有发现这样写会有什么样的问题. 今天一次偶然的测试中发现这些变量的值都是整数.一开始觉 ...

  5. [Phoenix] 一、快速入门

    Phoenix是一个开源的HBASE SQL层.Phoeinx可以用标准的JDBC API替代HBASE client API来创建表,插入和查询HBASE中的数据. Phoenix作为应用层和HBA ...

  6. hsv hsb rgb lab

    lab  欧式距离 反映 人类所能感受到的这两种颜色的差异

  7. MSVC环境,Qt代码包含中文无法通过构建的解决方案

    将代码文件的编码更改为ANSI(方便起见,将Qt Creator的Text Editor默认编码改为System) 这样就可以通过构建,不过会出现中文乱码的问题 还需要使用QStringLiteral ...

  8. docker: docker安装和镜像下载

    1 安装docker的apt源 apt-get install apt-transport-https ca-certificates curl software-properties-common ...

  9. spawn类expect方法详解

    本文我们将介绍spawn类的基本方法expect方法,这个方法是用来匹配返回的结果,这个返回的结果是指子程序的返回结果,同时会将匹配的相关信息保存在spawn类的相关属性中. 基本属性包括三个,第一个 ...

  10. Safair 浏览器cllick事件不生效或者需要双击才生效

    针对Safair 浏览器cllick事件不生效或者需要双击才生效的解决方案. 方法一:给元素加上cursor: pointer样式.(不生效) 方法二:ios事件机制不一样,将click事件改为mou ...