本文原作者: 張風捷特烈，原文發布于: 編程之王

FlutterUnit 中	輸入時聯想效果

我們先一步步來了解 Autocomplete 組件，先實現如下的最簡代碼:

使用 Autocomplete 時，必須提供的是 optionsBuilder 參數，另外可以通過 onSelected 回調來監聽選中的條目。

Autocomplete(
optionsBuilder:buildOptions,
onSelected:onSelected,
)

optionsBuilder 是一個 AutocompleteOptionsBuilder 類型的函數，從下面的定義中可以發現，該函數會回調 TextEditingValue 對象，且返回 FutureOr>。這說明這個函數是一個異步函數，我們可以在此進行網絡請求，數據庫查詢等工作，來返回一個 Iterable 的可迭代對象。

finalAutocompleteOptionsBuilderoptionsBuilder;


typedefAutocompleteOptionsBuilder=
FutureOr>Function(TextEditingValuetextEditingValue);

FutureString>> searchByArgs(String args) async{
//模擬網絡請求
awaitFuture.delayed(constDuration(milliseconds:200));
constList<String>data=[
'toly','toly49','toly42','toly56',
'card','ls','alex','fansha',
];
returndata.where((Stringname)=>name.contains(args));
}

這樣，buildOptions 的邏輯如下，這就完成了輸入--> 搜索 --> 展示聯想詞的流程。這也是 Autocomplete 組件最簡單的使用。

FutureString>> buildOptions( TextEditingValue textEditingValue ) async {
if(textEditingValue.text==''){
returnconstIterable<String>.empty();
}
returnsearchByArgs(textEditingValue.text);
}

其實上面那樣的默認樣式很丑，而且沒有提供直接的屬性設置樣式。所以了解如何自定義是非常關鍵的，否則只是一個玩具罷了。如下，我們先來實現搜索高亮顯示的自定義，其中也包括對輸入框的自定義。

Autocomplete(
optionsBuilder:buildOptions,
onSelected:onSelected,
optionsViewBuilder:_buildOptionsView,
fieldViewBuilder:_buildFieldView,
);

如下是 _buildOptionsView 方法的實現，其中會回調 onSelected 回調函數，和 options 數據，我們需要做的就是依靠數據，構建組件進行展示即可。另外，默認浮層面板和輸入框底部平齊，可以通過 Padding 進行下移。另外，由于是浮層，展示文字時，上面需要嵌套 Material 組件。

---->[高亮某些文字]----
finalTextStylelightTextStyle=constTextStyle(
color:Colors.blue,
fontWeight:FontWeight.bold,
);
InlineSpanformSpan(Stringsrc,Stringpattern){
Listspan=[];
Listparts=src.split(pattern);
if(parts.length>1){
for(inti=0;i
span.add(TextSpan(text:parts[i]));
if(i!=parts.length-1){
span.add(TextSpan(text:pattern,style:lightTextStyle));
}
}
}else{
span.add(TextSpan(text:src));
}
returnTextSpan(children:span);
}

另外，對于輸入框的構建，通過如下的 _buildFieldView 實現，其中有 _controller 記錄一下 TextEditingController，是因為 optionsViewBuilder 回調中并沒有回調輸入的 arg 字符，所以想要輸入的關鍵字高亮，只能出此下策。這樣，在 TextFormField 構建時，您可以指定自己需要的裝飾。

到此，我們就實現了上面，輸入過程中，浮層面板內容關鍵字高亮顯示的效果。

泛型的作用非常明顯，它最主要的是對浮層面板的構建，如果浮層中的條目不止是 String，我們就需要使用泛型，來提供某個的數據類型。比如下面的效果，其中浮層面板的條目是可以顯示更多的信息:

class User {
finalStringname;
finalboolman;
finalStringimage;


constUser(this.name,this.man,this.image);


@override
StringtoString(){
return'User{name:$name,man:$man,image:$image}';
}
}

然后在 Autocomplete 的泛型中使用 User 即可。

這樣在 _buildOptionsView 中，回調的就是 User 的可迭代對象。如下，封裝一個 _UserItem 組件，對條目進行顯示。

Autocomplete 本質上依賴于 RawAutocomplete 組件進行構建，可見它是一層簡單的封裝，簡化使用。為我們提供了默認的 optionsViewBuilder 和 fieldViewBuilder，顯示一個很丑的界面。也就是說，如果您了解如何定制這兩部分內容，您也就會了 RawAutocomplete 組件。

我們先看一下 Autocomplete 對 optionsViewBuilder 提供的默認顯示，其返回的是 _AutocompleteOptions 組件。如下，其實和我們自己實現的也沒有太大的區別，只是個默認存在，方便使用的小玩意而已。

另外，對于輸入框的構建，使用 _defaultFieldViewBuilder 靜態方法完成。

該方法，返回 _AutocompleteField 組件，本質上也就是構建了一個 TextFormField 組件。

對 Autocomplete 來說，只是 RawAutocomplete 套了個馬甲，本質上的功能還是在 RawAutocomplete 的狀態類中完成的。如下是 _RawAutocompleteState 的部分代碼，可以看出這里的浮層面板，是通過 Overlay 實現的，另外通過 CompositedTransformTarget 和 CompositedTransformFollower 對浮層進行定位。

那本文就這樣，如果想簡單地實現搜索聯想詞，Autocomplete 是一個很不錯的選擇。

長按右側二維碼

查看更多開發者精彩分享

?點擊屏末|閱讀原文|即刻報名參與"開發者說·DTalk"