flutter 中的搜索条实现
import 'package:flutter/material.dart'; import 'package:flutter_app/SearchBarDemo.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.green, //定义主题风格 primarySwatch ), home: SearchBarDemo(), ); } }
import 'package:flutter/material.dart'; import 'asset.dart'; class SearchBarDemo extends StatefulWidget { _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()); } // 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)); } @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 context) { final suggestionList = query.isEmpty ? recentSuggest : searchList.where((input) => input.startsWith(query)).toList(); 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 = [ "上衣", "华为", "电视", "新闻" ]; const recentSuggest = [ "推荐-1", "推荐-2" ];
效果:
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!
posted on 2019-08-29 22:30 LoaderMan 阅读(2610) 评论(0) 编辑 收藏 举报