主入口文件
繼承StatelessWidget,然後在home屬性中加入SearchBarDemo,這是一個自定義的Widget,主要代碼都在這個文件中。
import 'package:flutter/material.dart';
import 'search_bar_demo.dart';
void main() =>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title:'Flutter Demo',
theme: ThemeData.light(),
home: SearchBarDemo()
);
}
}
數據文件 asset.dart
asset.dart相當於數據文件,工作中這些數據是後臺傳遞給我們,或者寫成配置文件的,這裏我們就以List的方式代替了。我們在這個文件中定義了兩個List:
-
searchList : 這個相當於數據庫中的數據,我們要在這裏進行搜索。
-
recentSuggest : 目前的推薦數據,就是搜索時,自動爲我們進行推薦。
const searchList = [
"jiejie-大長腿",
"jiejie-水蛇腰",
"gege1-帥氣歐巴",
"gege2-小鮮肉"
];
const recentSuggest = [
"推薦-1",
"推薦-2"
];
AppBar的樣式製作
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: (){
print('開始搜索');
}
),
]
)
);
}
}
重寫buildActions方法:
buildActions方法時搜索條右側的按鈕執行方法,我們在這裏方法裏放入一個clear圖標。 當點擊圖片時,清空搜索的內容。
@override
List<Widget> buildActions(BuildContext context){
return [
IconButton(
icon:Icon(Icons.clear),
onPressed: ()=>query = "",)
];
}
buildLeading 方法重寫
搜索欄左側的圖標和功能的編寫
@override
Widget buildLeading(BuildContext context) {
return IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow, progress: transitionAnimation),
onPressed: () => close(context, null));
}
buildResults方法重寫
buildResults方法,是搜到到內容後的展現,
@override
Widget buildResults(BuildContext context) {
return Container(
width: 100.0,
height: 100.0,
child: Card(
color: Colors.redAccent,
child: Center(
child: Text(query),
),
),
);
}
buildSuggestions方法重寫
這個方法主要的作用就是設置推薦,就是我們輸入一個字,然後自動爲我們推送相關的搜索結果
@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))
])),
));
}
}