Flutter搜尋介面的實現，SearchDelegate的使用

摘要： Flutter 搜尋介面的實現，SearchDelegate的使用 1.使用系統的搜尋介面 在之前的學習中自己實現了了一個搜尋介面，其中自定義了搜尋欄，實現效果也就將就，後來發現在Flutter中有現成的控制元件可以使用，也就是 SearchDelegate<T> ,呼叫...

Flutter 搜尋介面的實現，SearchDelegate的使用

1.使用系統的搜尋介面

在之前的學習中自己實現了了一個搜尋介面，其中自定義了搜尋欄，實現效果也就將就，後來發現在Flutter中有現成的控制元件可以使用，也就是 SearchDelegate<T> ,呼叫 showSearch(context: context, delegate: searchBarDelegate()) 實現。

2.定義 SearchDelegate

class searchBarDelegate extends SearchDelegate<String> {
@override
List<Widget> buildActions(BuildContext context) {
return null;
}

@override
Widget buildLeading(BuildContext context) {
return null;
}

@override
Widget buildResults(BuildContext context) {
return null;
}

@override
Widget buildSuggestions(BuildContext context) {
return null;
}


@override
ThemeData appBarTheme(BuildContext context) {
// TODO: implement appBarTheme
return super.appBarTheme(context);
}
}

繼承 SearchDelegate<String> 之後需要重寫一些方法，這裡給定的 String 型別是指搜尋 query 的型別為 String 。

• List<Widget> buildActions(BuildContext context) :這個方法返回一個控制元件列表，顯示為搜尋框右邊的圖示按鈕，這裡設定為一個清除按鈕,並且在搜尋內容為空的時候顯示建議搜尋內容，使用的是 showSuggestions(context) 方法：

@override
List<Widget> buildActions(BuildContext context) {
return [
IconButton(
icon: Icon(Icons.clear),
onPressed: () {
query = "";
showSuggestions(context);
},
),
];
}

• showSuggestions(context) ：這個方法顯示建議的搜尋內容，也就是 Widget buildSuggestions(BuildContext context) 方法的的呼叫；

• Widget buildLeading(BuildContext 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);
}
},
);
}

Widget buildSuggestions(BuildContext context)
Widget buildSuggestions(BuildContext context)
ThemeData appBarTheme(BuildContext context)

///* [AppBar.backgroundColor], which is set to [ThemeData.primaryColor].
///* [AppBar.iconTheme], which is set to [ThemeData.primaryIconTheme].
///* [AppBar.textTheme], which is set to [ThemeData.primaryTextTheme].
///* [AppBar.brightness], which is set to [ThemeData.primaryColorBrightness].
ThemeData appBarTheme(BuildContext context) {
assert(context != null);
final ThemeData theme = Theme.of(context);
assert(theme != null);
return theme.copyWith(
primaryColor: Colors.white,
primaryIconTheme: theme.primaryIconTheme.copyWith(color: Colors.grey),
primaryColorBrightness: Brightness.light,
primaryTextTheme: theme.textTheme,
);
}

可以看到預設的的淺色主題白底灰字，可以自行修改；

3.呼叫showSearch(context: context, delegate: searchBarDelegate())方法跳轉到搜尋介面

showSearch(context: context, delegate: searchBarDelegate()) :跳轉到搜尋介面。