效果如下
官方需要重写四个关键方法
class searchBarDelegate extends SearchDelegate<String> {
/*这个方法返回一个控件列表，显示为搜索框右边的图标按钮，这里设置为一个清除按钮,并且在搜索内容为空的时候显示建议搜索内容，使用的是showSuggestions(context)方法：*/
@override
List<Widget> buildActions(BuildContext context) {
return null;
}
/*这个方法返回一个控件，显示为搜索框左侧的按钮，一般设置为返回，这里返回一个具有动态效果的返回按钮：*/
@override
Widget buildLeading(BuildContext context) {
return null;
}
@override
Widget buildResults(BuildContext context) {
return null;
}
/*这个方法返回一个控件，显示为搜索内容区域的建议内容。*/
@override
Widget buildSuggestions(BuildContext context) {
return null;
}
/*这个方法返回一个主题，也就是可以自定义搜索界面的主题样式：*/
@override
ThemeData appBarTheme(BuildContext context) {
// TODO: implement appBarTheme
return super.appBarTheme(context);
}
}
首页展示检索框
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Padding(
padding: const EdgeInsets.only(top: 2, bottom: 2, left: 16),
child: Container(
height: 35,
width: MediaQuery.of(context).size.width - 64,
decoration: BoxDecoration(
color: const Color.fromRGBO(230, 230, 230, 1.0),
borderRadius: BorderRadius.circular(20)),
child: InkWell(
child: const Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Icon(Icons.search, color: Colors.grey)),
Text(
"输入关键词查找片源",
style: TextStyle(color: Colors.grey, fontSize: 15),
)
],
),
onTap: () {
showSearch(context: context, delegate: SearchBarDelegate());
},
),
),
),
toolbarHeight: 45.sp,
bottom: TabBar(
controller: _tabController,
tabs: tabs.map((e) => Tab(text: e)).toList(),
),
),
实现 SearchDelegate
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class SearchBarDelegate extends SearchDelegate<String> {
var nameList = ["完美世界", "西行记", "仙逆", "遮天", "圣墟", "斗罗大陆", "涉谷愤怒的海"];
late bool flag;
@override
String get searchFieldLabel => '输入关键词查找片源';
@override
TextStyle get searchFieldStyle => TextStyle(fontSize: 14.0.sp);
@override
List<Widget>? buildActions(BuildContext context) {
return [
IconButton(
icon: const Icon(Icons.clear),
onPressed: () {
query = "";
showSuggestions(context);
},
)
];
}
@override
Widget? buildLeading(BuildContext context) {
return IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow, progress: transitionAnimation),
onPressed: () {
if (query.isEmpty) {
close(context, '');
} else {
query = "";
showSuggestions(context);
}
},
);
}
@override
Widget buildResults(BuildContext context) {
for (int i = 0; i < nameList.length; i++) {
if (query == nameList[i]) {
flag = true;
break;
} else {
flag = false;
}
}
return flag == true
? Padding(
padding: const EdgeInsets.all(16),
child: InkWell(
child: Text(query),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TextScreen(s: query),
),
);
},
))
: const Center(
child: Text("很抱歉，没有找到该搜索结果"),
);
}
@override
Widget buildSuggestions(BuildContext context) {
final suggestionsList = query.isEmpty
? nameList
: nameList.where((input) => input.startsWith(query)).toList();
return ListView.builder(
itemCount: suggestionsList.length,
itemBuilder: (context, index) {
return InkWell(
child: ListTile(
title: RichText(
text: TextSpan(
text: suggestionsList[index].substring(0, query.length),
style: const TextStyle(
color: Colors.black, fontWeight: FontWeight.bold),
children: [
TextSpan(
text: suggestionsList[index].substring(query.length),
style: const TextStyle(color: Colors.grey))
]),
),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TextScreen(s: suggestionsList[index]),
),
);
},
);
});
}
}
class TextScreen extends StatelessWidget {
final String s;
const TextScreen({super.key, required this.s});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("搜索结果内容"),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Center(
child: Text(s),
)),
);
}
}
为了和首页保持一样的效果需要修改源码
- 修改文字和大小 提供重写方法
@override
String get searchFieldLabel => '输入关键词查找片源';
@override
TextStyle get searchFieldStyle => TextStyle(fontSize: 14.0.sp);
- 要在输入框之前加一个 检索的图标
- ~/flutter/packages/flutter/lib/src/material/search.dart
// 导入icon
import 'package:flutter/material.dart';
// 修改源码 直接到文件末尾
return Semantics(
explicitChildNodes: true,
scopesRoute: true,
namesRoute: true,
label: routeName,
child: Theme(
data: theme,
child: Scaffold(
appBar: AppBar(
leading: widget.delegate.buildLeading(context),
title: TextField(
controller: widget.delegate._queryTextController,
focusNode: focusNode,
style: widget.delegate.searchFieldStyle ?? theme.textTheme.titleLarge,
textInputAction: widget.delegate.textInputAction,
keyboardType: widget.delegate.keyboardType,
onSubmitted: (String _) => widget.delegate.showResults(context),
decoration: InputDecoration(
// 加这个位置
prefixIcon: Icon(Icons.search, color: Colors.grey),
hintText: searchFieldLabel
),
),
flexibleSpace: widget.delegate.buildFlexibleSpace(context),
actions: widget.delegate.buildActions(context),
bottom: widget.delegate.buildBottom(context),
),
body: AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
child: body,
),
),
),
);