20个Flutter实例视频教程-第11节: 一个不简单的搜索条-2
2024-09-30 18:49:34
博客地址:
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
最新文章
- python的shutil模块
- H2 数据库
- markdown命令语法
- 剑指Offer 连续子数组的最大和
- Mysql日期时间大全
- 网站构建学习笔记(0)&mdash;&mdash;基本概念了解及资源学习(copy自w3school)
- Intent Android 详解
- 解决nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed错误
- Java中Calender引用类型
- android 处理器crash刊物
- 在docker中运行.netcore程序
- two&#39;s complement,2的补码
- ROM、PROM、EPROM、EEPROM、FLASH ROM、FLASH、eMMC
- hdu 1864 最大报销额 01背包
- 并发编程之 线程协作工具 LockSupport
- Windows 使用 StarWind 创建的 Oracle RAC环境 异常关机之后的处理过程
- struts2中ognl标签具体解释
- tensorflow显存管理
- 【移动端debug-4】iOS下setTimeout无法触发focus事件的解决方案
- IOS仿微信朋友圈好友展示