搜索功能在每个app里面必不可少，也是常见的功能，以下是个案例。
效果图展示：
说明：本功能实现，点击搜索框跳转至搜索页面，搜索联想功能
import 'package:flutter/material.dart';
import 'detail_page.dart';
class HomePage extends StatefulWidget{
_TvPageState createState() => _TvPageState();
}
class _TvPageState extends State<HomePage> with AutomaticKeepAliveClientMixin{
@override
void initState(){
super.initState();
}
@override
Widget build(BuildContext context){
// super.build(context);
return Scaffold(
backgroundColor: Color.fromRGBO(244, 245, 245, 1),
appBar: AppBar(
title: Container(
child:InkWell(
onTap: (){
showSearch(context: context, delegate: CustomSearchDelegate()); //实现点击跳转至搜索页面
},
child: Row(
children: <Widget>[
Container(
child: Text(
'广州',
style: TextStyle(fontSize: 14),
),
),
Container(
width: ScreenUtil().setWidth(50),
child: Icon(
Icons.expand_more,
color: Colors.white,
size:20
),
),
Container(
width: ScreenUtil().setWidth(515),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(50.0)),
),
height: 30,
child: Row(
children: <Widget>[
Container(
width: ScreenUtil().setWidth(60),
child:
Icon(
Icons.search,
color: Colors.grey,
size:20
)
),
Container(
width: ScreenUtil().setWidth(400),
child:
Text(
'影视名称/主演',
style: TextStyle(color: Colors.black,fontSize: 16),
),
),
Container(
width: ScreenUtil().setWidth(50),
child: Icon(
Icons.mic,
color: Colors.grey,
size:20
),
)
],
)
),
],
),
),
)
),
);
}
//搜索
class CustomSearchDelegate extends SearchDelegate {
@override
List<Widget> buildActions(BuildContext context) {
return [
IconButton(
tooltip: 'Clear',
icon: const Icon(Icons.clear),
onPressed: () {
query = '';
showSuggestions(context);
},
)
];
}
@override
String get searchFieldLabel => "影视名称/主演";
Widget buildLeading(BuildContext context) {
return IconButton(
tooltip: 'Back',
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow,
progress: transitionAnimation,
),
onPressed: () {
this.close(context, null);
},
);
}
@override
TextInputType get keyboardType => TextInputType.text; //设置输入框输入内容类型
@override
Widget buildResults(BuildContext context) {
// if (int.parse(query) >= 100) {
// return Center(child: Text('请输入小于 100 的数字'));
// }
var map = Map();
map["query"] = query;
return Scaffold(
body: FutureBuilder(
future: request('gsearchs',formData: map),
builder: (context,AsyncSnapshot snapshot) {
if(snapshot.connectionState ==ConnectionState.done){
if(snapshot.hasData){
var data = json.decode(snapshot.data.toString());
return ListView.builder(
itemCount: List.of(data["data"]).length,
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: (){
Navigator.of(context).push(
MaterialPageRoute(builder: (context)=>DetailPage(
eachVodId: List.of(data["data"])[index]['id'],
eachVodName:List.of(data["data"])[index]['vod_name'],
p:1
))
);
},
child:ListTile(title: Text(List.of(data["data"])[index]['vod_name'])),
);
}
);
}else{
return Center(child: CircularProgressIndicator());
}
}else{
return Center(child: CircularProgressIndicator());
}
})
);
}
@override
Widget buildSuggestions(BuildContext context) {
var map = Map();
map["query"] = query;
return Scaffold(
body: FutureBuilder(
future: request('gsearchs',formData: map),
builder: (context, snapshot) {
if(snapshot.connectionState ==ConnectionState.done){
if(snapshot.hasData){
var data = json.decode(snapshot.data.toString());
return ListView.builder(
itemCount: List.of(data["data"]).length,
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: (){
Navigator.of(context).push(
MaterialPageRoute(builder: (context)=>DetailPage(
eachVodId: List.of(data["data"])[index]['id'],
eachVodName:List.of(data["data"])[index]['vod_name'],
p:1
))
);
},
child:ListTile(title: Text(List.of(data["data"])[index]['vod_name'])),
);
}
);
}else{
return Center(child: CircularProgressIndicator());
}
}else{
return Center(child: CircularProgressIndicator());
}
})
);
}
}