Flutter 仿搜索引擎模糊搜索框案例實現

前言

各位同學大家好，有段時間沒有給大家更新文章了，趁着有時間就寫了一個模仿搜索引擎做的一個flutter版本的模糊搜索框案例，分享給大家，如果有錯誤和紕漏地方希望大家及時指出，那么廢話不多說，我們正式開始

准備工作

需要安裝flutter的開發環境：大家可以去看看之前的教程：
1 win系統flutter開發環境安裝教程: https://www.jianshu.com/p/152447bc8718
2 mac系統flutter開發環境安裝教程：https://www.jianshu.com/p/bad2c35b41e3

效果圖：

具體實現：

首先是首頁我們 寫了一個appbar 然后右側是一個搜索button 點擊之后跳轉到下一頁的模糊搜框頁面

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
     appBar: AppBar(
       title: Text("searchDemo"),
       actions: <Widget>[
         IconButton(
           icon: Icon(
             Icons.search
           ),
           onPressed: (){
             showSearch(context: context, delegate: searchBarDelegate());
           },
         )
       ],
     ),
    );
  }

我們在 appbar組件中的actions 屬性中我們添加一個iconbutton來實現 右側的搜索button的UI顯示。

模糊搜索框實現

搜索框我們這邊是寫了一個組件繼承SearchDelegate 並且重寫了 buildActions buildLeading
buildResults buildSuggestions 等方法

buildActions 方法右側刪除輸入框內容方法 ：

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

當我們點擊右側刪除button 觸發 onPressed 方法我們把輸入框內容置空

buildLeading 方法左側返回鍵方法

    @override
     Widget buildLeading(BuildContext context) {
     return IconButton(
       icon: AnimatedIcon(
           icon: AnimatedIcons.menu_arrow,
           progress:transitionAnimation),
       onPressed: ()=>close(context,null),
     );
  }

當我們點擊左側返回鍵 調用 onPressed 方法然后關閉模糊搜索頁面

buildResults 搜索結果方法：

  @override
  Widget buildResults(BuildContext context) {
      return Center(
          child:Container(
              width: 100,
              height: 100,
            child:Card(
               color: Colors.redAccent,
            child: Text(query),
           ),
          ),
      );
  }

搜索結果我們 寫了一個 Center 組件 然后里面嵌套一個 Container 組件設置寬高都為100單位大小 ，然后里面寫了一個Card卡片組件 來美化我們的結果頁面 最后我們里面嵌套text組件顯示搜到的內容
這個搜索結果頁面我們只是做個示例 同學們可以自由發揮

buildSuggestions 模糊搜索列表方法：

  @override
  Widget buildSuggestions(BuildContext context) {
    final suggestionList=query.isEmpty?
        reecntSuggest:serchList.where((input) => input.startsWith(query)).toList();
    return ListView.builder(
        itemCount: suggestionList.length==0?0: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
                    )
                )
                ]
            ),
          ),
        ),
    );
  }

我們定義一個 list數組 使用三目運算判斷輸入內容是否為空 為空則使用我們默認的推薦的數據顯示，
不為空我們就用數據源的數據判斷輸入內容前綴進行匹配然后返回list

   final suggestionList=query.isEmpty?
        reecntSuggest:serchList.where((input) => input.startsWith(query)).toList();

模擬搜索死數據源

const  serchList=[
  "宇智波-斑",
  "宇智波-泉奈",
  "宇智波-鼬",
  "宇智波-=佐助",
  "千手-柱間",
  "千手-扉間",
];
const  reecntSuggest=[
    "推薦-1",
     "推薦-2"
];

顯示部分我們寫了一個 ListView組件顯示，item我們寫了一個 ListTile ，ListTile里面我們的title 我們把搜索匹配到的顯示為黑色 ，通過substring 來截取 沒有匹配的則顯示灰色 同理通過 substring 截取顯示

   return ListView.builder(
        itemCount: suggestionList.length==0?0: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
                    )
                )
                ]
            ),
          ),
        ),
    );

到處整個模糊搜索框內容我們就講完了

最后總結

相對於原生安卓或者iOS flutter提供了豐富的 組件讓我們繼承來實現特殊需求的效果 這個模糊搜索框的 我們就是繼承 SearchDelegate組件 重寫 buildActions buildLeading buildResults buildSuggestions 等方法來實現的， 其中的數據源我是寫死的在本地的 同學們可以找一些接口用網絡請求來嘗試下，我這邊就不展開講了 有興趣的同學可以多研究下 最后希望我的文章能幫助到各位解決問題 ，以后我還會貢獻更多有用的代碼分享給大家。各位同學如果覺得文章還不錯 ，麻煩給關注和star，小弟在這里謝過啦 也可以加我個人QQ/微信（1693891473）

項目地址：

碼雲 ：https://gitee.com/qiuyu123/flutter_serchdemo

QQ 交流群: