作者:mobiledu2502939211 | 来源:互联网 | 2023-08-21 14:59
搜索欄importpackage:fluttermaterial.dart;typedefSearchItemCallvoidFunction(Stringitem);classS
搜索欄
import 'package:flutter/material.dart';
typedef SearchItemCall = void Function(String item);
class SearchBarDelegate extends SearchDelegate {
@override
List buildActions(BuildContext context) {
//右侧显示内容 这里放清除按钮
return [
IconButton(
icon: 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, null);
} else {
query = "";
showSuggestions(context);
}
},
);
}
@override
Widget buildResults(BuildContext context) {
//点击了搜索显示的页面
return Center(
child: Text('123'),
);
}
@override
Widget buildSuggestions(BuildContext context) {
//点击了搜索窗显示的页面
return SearchContentView();
}
@override
ThemeData appBarTheme(BuildContext context) {
return super.appBarTheme(context);
}
}
class SearchContentView extends StatefulWidget {
@override
_SearchContentViewState createState() => _SearchContentViewState();
}
class _SearchContentViewState extends State {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text(
'大家都在搜',
style: TextStyle(fontSize: 16),
),
),
SearchItemView(),
Container(
margin: EdgeInsets.only(top: 20),
child: Text(
'历史记录',
style: TextStyle(fontSize: 16),
),
),
SearchItemView()
],
),
);
}
}
class SearchItemView extends StatefulWidget {
@override
_SearchItemViewState createState() => _SearchItemViewState();
}
class _SearchItemViewState extends State {
List items = [
'index',
'order',
'main',
'123123',
'5test',
];
@override
Widget build(BuildContext context) {
return Container(
child: Wrap(
spacing: 10,
// runSpacing: 0,
children: items.map((item) {
return SearchItem(title: item);
}).toList(),
),
);
}
}
class SearchItem extends StatefulWidget {
@required
final String title;
const SearchItem({Key key, this.title}) : super(key: key);
@override
_SearchItemState createState() => _SearchItemState();
}
class _SearchItemState extends State {
@override
Widget build(BuildContext context) {
return Container(
child: InkWell(
child: Chip(
label: Text(widget.title),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)
),
),
onTap: () {
print(widget.title);
},
),
color: Colors.white,
);
}
}
main
body: Center(
child: InkWell(
child: Icon(Icons.search),
onTap: (){
showSearch(context: context,delegate: SearchBarDelegate());
},
)
),
demo
import 'package:flutter/material.dart';
import 'asset.dart';
class SearchBar extends StatefulWidget {
@override
_SearchBarState createState() => _SearchBarState();
}
class _SearchBarState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SearchBar'),
actions: [
IconButton(
icon: Icon(Icons.search),
onPressed: (){
showSearch(context: context, delegate: SearchBarDelegate());
},
),
],
),
);
}
}
class SearchBarDelegate extends SearchDelegate{
//重寫交叉按鈕清空數據
@override
List buildActions(BuildContext context) {
// TODO: implement buildActions
return [
IconButton(
icon: Icon(Icons.clear),
onPressed: ()=> query = '',
)
];
}
//重寫左邊按鈕
@override
Widget buildLeading(BuildContext context) {
// TODO: implement buildLeading
return IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow,//動態圖表
progress: transitionAnimation,
),
onPressed: () => close(context,null),
);
}
//重寫返回結果
@override
Widget buildResults(BuildContext context) {
// TODO: implement buildResults
return Container(
width: 100,
height: 100,
child: Card(
color: Colors.blueAccent,
child: Text(query),
),
);
}
//推薦
@override
Widget buildSuggestions(BuildContext context) {
final suggestiOnList= query.isEmpty//判斷是否為空
? recentSuggest:searchList.where((input)=> input.startsWith(query)).toList();
// TODO: implement buildSuggestions
return ListView.builder(
itemCount: suggestionList.length,
itemBuilder: (context,index)=>ListTile(
title: RichText(
text: TextSpan(
//被搜索的
text: suggestionList[index].substring(0,query.length),
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
//未被搜索的
children: [
TextSpan(
text: suggestionList[index].substring(query.length),
style: TextStyle(color: Colors.grey)
)
]
),
),
),
);
}
}
數據
const searchList = [
'test-1',
'test-2',
'test-3',
'test-4',
'test-5'
];
const recentSuggest = [
'推薦 - 1',
'推薦 - 2'
];