搜索功能在每个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()); } }) ); } }
文章评论(0)