Flutter 基础控件 SearchDelegate

Flutter 基础控件 SearchDelegate

/// 搜索 demo
class SearchDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("请搜索"), actions: <Widget>[
        IconButton(icon: Icon(Icons.search), onPressed: () {
          showSearch(context: context, delegate: SearchBarDelegate());
        },)
      ],),
    );
  }
}

class SearchBarDelegate extends SearchDelegate<String> {
  // 搜索条右侧的按钮执行方法，我们在这里方法里放入一个clear图标。 当点击图片时，清空搜索的内容。
  @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, "");
      },
    );
  }

  // 搜索到内容了
  @override
  Widget buildResults(BuildContext context) {
    return Container(
      child: Center(
        child: Text("搜索的结果：$query"),
      ),
    );
  }

  // 输入时的推荐及搜索结果
  @override
  Widget buildSuggestions(BuildContext context) {
    final suggestionList = query.isEmpty ? recentList : searchList.where((
        input) => input.startsWith(query)).toList();
    return ListView.builder(
        itemCount: suggestionList.length,
        itemBuilder: (context, index) {
          // 创建一个富文本，匹配的内容特别显示
          return 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)
                )
              ],)),
            onTap: (){
              query = suggestionList[index];
              Scaffold.of(context).showSnackBar(SnackBar(content: Text(query)));
            },
          );
        },
    );
  }
}

///================= 模拟后台数据 ========================
const searchList = [
  "搜索结果数据1-aa",
  "搜索结果数据2-bb",
  "搜索结果数据3-cc",
  "搜索结果数据4-dd",
  "搜索结果数据5-ee",
  "搜索结果数据6-ff",
  "搜索结果数据7-gg",
  "搜索结果数据8-hh"
];

const recentList = [
  "推荐结果1-ii",
  "推荐结果2-jj",
  "推荐结果3-kk",
  "推荐结果4-ll",
  "推荐结果5-mm",
  "推荐结果6-nn",
  "推荐结果7-oo",
  "推荐结果8-pp",
];

效果展示

补充

1.有小伙伴提问：我想在搜索的时候调用api发送网络请求，该如何实现啊？
可以使用FutureBuilder
示例代码如下：

// 添加了网络请求模拟方法
 Future<String> _requestData(String queryContent, BuildContext context) async {
   return await Future.delayed(Duration(seconds: 5), () {
     // 模拟有数据
     return "搜索关键词：queryContent，我是网络请求的结果：没有";
     // 模拟加载出错
//      throw AssertionError("ERROR");
   });
 }
 // 修改点击事件
  @override
 Widget buildSuggestions(BuildContext context) {
   // 输入时的推荐及搜索结果
   final suggestionList = query.isEmpty
       ? recentList
       : searchList.where((input) => input.startsWith(query)).toList();
   return ListView.builder(
     itemCount: suggestionList.length,
     itemBuilder: (context, index) {
       // 创建一个富文本，匹配的内容特别显示
       return 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))
               ],
             )),
         onTap: () {
         	// 主要修改了此处
           query = suggestionList[index];
           buildResults(context);
         },
       );
     },
   );
 }
 // 修改buildResults方法
   @override
  Widget buildResults(BuildContext context) {
    // 搜索到内容了
    return FutureBuilder(
        future: _requestData(query, context),
        builder: (context, snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.none:
              return new Container();
            // 当前没有连接到任何的异步任务
            case ConnectionState.waiting:
            // 连接到异步任务并等待进行交互
            case ConnectionState.active:
            print("--------->loading");
              return Container(
                child: Center(
                  child: Text("加载数据中..."),
                ),
              );
            // 连接到异步任务并开始交互
            case ConnectionState.done:
              print("--------->done");
              if(snapshot.hasError){
                print("--------->error");
                return Container(
                  child: Center(
                    child: Text("加载数据失败"),
                  ),
                );
              }else if(snapshot.hasData){
                print("--------->data");
                return Container(
                  child: Center(
                    child: Text("${snapshot.data}"),
                  ),
                );
              }
          }
          return Container();
        });
  }