快捷導航

Android Flutter實現(xiàn)淘寶App的搜索推薦

更新時間：2023年07月28日 11:38:03 作者：島上碼農(nóng)

這篇文章主要為大家詳細介紹了Android?Flutter如何模擬實現(xiàn)淘寶App的搜索推薦，文中的示例代碼講解詳細，具有一定的借鑒價值，感興趣的可以了解一下

前言

在很多 App 中，當用戶輸入搜索內(nèi)容時，往往會自動匹配一些候選搜索內(nèi)容，以便讓用戶快速完成搜索內(nèi)容的輸入。同時，也可以在候選的搜索內(nèi)容中根據(jù)用戶偏好“加塞”廣告，提高成交轉(zhuǎn)化率。比如在淘寶搜索“蘋果”這個詞時，就會出現(xiàn)蘋果相關(guān)的候選選項。類似這樣的功能就需要用到輸入內(nèi)容的自動填充。

這種功能可以自己去寫兩個獨立的組件，比如一個搜索框，一個候選內(nèi)容彈層，通過內(nèi)容聯(lián)動來實現(xiàn)。不過，F(xiàn)lutter 中其實有自帶的組件，叫做 AutoComplete。

AutoComplete 簡介

AutoComplete是一個泛型類，組件定義如下。

class?Autocomplete<T?extends?Object>?extends?StatelessWidget?{
??const?Autocomplete({
????super.key,
????required?this.optionsBuilder,
????this.displayStringForOption?=?RawAutocomplete.defaultStringForOption,
????this.fieldViewBuilder?=?_defaultFieldViewBuilder,
????this.onSelected,
????this.optionsMaxHeight?=?200.0,
????this.optionsViewBuilder,
????this.initialValue,
??});
??//……

其中泛型指的是候選內(nèi)容對象的類型，最簡單的就是 String 類型，但是我們后臺返回的可能會是一個完整的對象，這個時候我們就可以定義為后臺對象對應(yīng)的實體類。具體的參數(shù)說明如下：

optionsBuilder：選項內(nèi)容構(gòu)建函數(shù)，實際上就是匹配用戶輸入的規(guī)則，我們可以基于用戶輸入的內(nèi)容去做二次處理，比如模糊匹配用戶輸入的內(nèi)容。
displayStringForOption：后續(xù)內(nèi)容如何顯示，通常會顯示名稱、標題之類的內(nèi)容，也可以根據(jù)需要自定義顯示內(nèi)容，例如地址就可以將省市區(qū)和詳細地址拼接起來。
fieldViewBuilder：輸入框的構(gòu)建函數(shù)，這個函數(shù)需要返回一個輸入框供用戶輸入，輸入框樣式可以自定義。
onSelected：選中候選內(nèi)容項的回調(diào)，通常我們會在這個方法里觸發(fā)搜索請求。
optionsMaxHeight：候選項彈層的最大高度，超過這個高度后可以滾動。
optionsViewBuilder：候選項的彈層組件的構(gòu)建函數(shù)，默認是使用 Material 風格的下拉列表視圖組件，也可以自定義候選彈層的組件。
initialValue：初始值，比如根據(jù)用戶近期瀏覽記錄推薦一個候選的初始值。

實際應(yīng)用

下面我們以一個輸入國家檢索的應(yīng)用為例，我們準備了一個Country類，其中有id和name字段。當檢測到國家名稱匹配用戶輸入的文字時，就會篩選出候選的國家，從而簡化用戶的輸入過程。例如，用戶輸入“中”字，就會把“中國”這個候選項篩選出來。類似的場景也可以用于商品搜索推薦、支持輸入的下拉框等等。實現(xiàn)的效果如下圖所示。

示例代碼如下：

class?AutoCompleteDemo?extends?StatefulWidget?{
??const?AutoCompleteDemo({super.key});
??@override
??//?ignore:?library_private_types_in_public_api
??_AutoCompleteDemoState?createState()?=>?_AutoCompleteDemoState();
}
class?_AutoCompleteDemoState?extends?State<AutoCompleteDemo>?{
??final?List<Country>?countries?=?[
????Country(id:?1,?name:?'中國'),
????Country(id:?2,?name:?'美國'),
????Country(id:?3,?name:?'印度'),
????Country(id:?4,?name:?'俄羅斯'),
????Country(id:?5,?name:?'英國'),
????Country(id:?6,?name:?'巴西'),
????Country(id:?7,?name:?'法國'),
????Country(id:?8,?name:?'德國'),
??];
??var?selectedCountry?=?'';
??@override
??Widget?build(BuildContext?context)?{
????return?Scaffold(
??????appBar:?AppBar(
????????title:?const?Text('AutoComplete?Demo'),
??????),
??????body:?Center(
????????child:?Autocomplete<Country>(
??????????optionsBuilder:?(TextEditingValue?textEditingValue)?{
????????????return?Future.delayed(const?Duration(milliseconds:?2000),?()?{
??????????????return?countries
??????????????????.where(
??????????????????????(country)?=>?country.name.contains(textEditingValue.text))
??????????????????.toList();
????????????});
??????????},
??????????onSelected:?(Country?country)?{
????????????selectedCountry?=?country.name;
??????????},
??????????fieldViewBuilder:?(BuildContext?context,
??????????????TextEditingController?textEditingController,
??????????????FocusNode?focusNode,
??????????????VoidCallback?onFieldSubmitted)?{
????????????return?TextField(
??????????????controller:?textEditingController,
??????????????focusNode:?focusNode,
??????????????onChanged:?(text)?{
????????????????selectedCountry?=?text;
??????????????},
??????????????decoration:?const?InputDecoration(
????????????????labelText:?'國家',
??????????????),
????????????);
??????????},
??????????displayStringForOption:?(Country?country)?=>
??????????????'[${country.id}]?${country.name}',
??????????initialValue:?TextEditingValue(text:?selectedCountry),
????????),
??????),
????);
??}
}
class?Country?{
??final?int?id;
??final?String?name;
??Country({required?this.id,?required?this.name});
}

這里我們使用了Country這個類作為AutoComplete的泛型參數(shù)，這樣就可以支持對Country列表數(shù)據(jù)進行處理了。具體的邏輯說明如下：

optionsBuilder：我們采用了一個Future延時來模擬后臺數(shù)據(jù)請求，當然，如果選項數(shù)據(jù)是固定的，可以進入頁面的時候一次請求好就行。如果是要后臺配合搜索的，那么每次輸入都可以請求匹配的候選數(shù)據(jù)。這里實際處理就是篩選出國家名稱中包含用戶輸入內(nèi)容的列表。
onSelected：選中后的操作，這里只是更新選項值，實際如果是搜索商品就可以直接攜帶搜索關(guān)鍵詞跳轉(zhuǎn)到搜索結(jié)果頁面。
fieldViewBuilder：這里用于構(gòu)建一個輸入框，輸入框的樣式可以根據(jù)自己需要定義。如果要單獨控制輸入框，比如輸入內(nèi)容，獲取焦點等，可以定義一個TextEditingController對象和FocusNode對象來存儲回調(diào)函數(shù)的textEditingController和focusNode。這兩個參數(shù)是在AutoComplete類里面定義的。
displayStringForOption：候選項的顯示（包括選中后的文本框），這種可以用于將一個對象的幾個字符串拼接起來，例如前面講到的地址，這里我們演示是將id和name拼接起來了。
initialValue：輸入框的初始值，如果是商品搜索，可以根據(jù)用戶近期的瀏覽記錄（或廣告追蹤記錄）展示推薦的搜索內(nèi)容，這個在電商App經(jīng)常看到。