本文原作者: 張風(fēng)捷特烈，原文發(fā)布于: 編程之王

FlutterUnit 中	輸入時(shí)聯(lián)想效果

我們先一步步來(lái)了解 Autocomplete 組件，先實(shí)現(xiàn)如下的最簡(jiǎn)代碼:

使用 Autocomplete 時(shí)，必須提供的是 optionsBuilder 參數(shù)，另外可以通過(guò) onSelected 回調(diào)來(lái)監(jiān)聽選中的條目。

Autocomplete(
optionsBuilder:buildOptions,
onSelected:onSelected,
)

optionsBuilder 是一個(gè) AutocompleteOptionsBuilder 類型的函數(shù)，從下面的定義中可以發(fā)現(xiàn)，該函數(shù)會(huì)回調(diào) TextEditingValue 對(duì)象，且返回 FutureOr>。這說(shuō)明這個(gè)函數(shù)是一個(gè)異步函數(shù)，我們可以在此進(jìn)行網(wǎng)絡(luò)請(qǐng)求，數(shù)據(jù)庫(kù)查詢等工作，來(lái)返回一個(gè) Iterable 的可迭代對(duì)象。

finalAutocompleteOptionsBuilderoptionsBuilder;


typedefAutocompleteOptionsBuilder=
FutureOr>Function(TextEditingValuetextEditingValue);

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

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

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

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

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

如下是 _buildOptionsView 方法的實(shí)現(xiàn)，其中會(huì)回調(diào) onSelected 回調(diào)函數(shù)，和 options 數(shù)據(jù)，我們需要做的就是依靠數(shù)據(jù)，構(gòu)建組件進(jìn)行展示即可。另外，默認(rèn)浮層面板和輸入框底部平齊，可以通過(guò) Padding 進(jìn)行下移。另外，由于是浮層，展示文字時(shí)，上面需要嵌套 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);
}

另外，對(duì)于輸入框的構(gòu)建，通過(guò)如下的 _buildFieldView 實(shí)現(xiàn)，其中有 _controller 記錄一下 TextEditingController，是因?yàn)?optionsViewBuilder 回調(diào)中并沒有回調(diào)輸入的 arg 字符，所以想要輸入的關(guān)鍵字高亮，只能出此下策。這樣，在 TextFormField 構(gòu)建時(shí)，您可以指定自己需要的裝飾。

到此，我們就實(shí)現(xiàn)了上面，輸入過(guò)程中，浮層面板內(nèi)容關(guān)鍵字高亮顯示的效果。

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

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 中，回調(diào)的就是 User 的可迭代對(duì)象。如下，封裝一個(gè) _UserItem 組件，對(duì)條目進(jìn)行顯示。

Autocomplete 本質(zhì)上依賴于 RawAutocomplete 組件進(jìn)行構(gòu)建，可見它是一層簡(jiǎn)單的封裝，簡(jiǎn)化使用。為我們提供了默認(rèn)的 optionsViewBuilder 和 fieldViewBuilder，顯示一個(gè)很丑的界面。也就是說(shuō)，如果您了解如何定制這兩部分內(nèi)容，您也就會(huì)了 RawAutocomplete 組件。

我們先看一下 Autocomplete 對(duì) optionsViewBuilder 提供的默認(rèn)顯示，其返回的是 _AutocompleteOptions 組件。如下，其實(shí)和我們自己實(shí)現(xiàn)的也沒有太大的區(qū)別，只是個(gè)默認(rèn)存在，方便使用的小玩意而已。

另外，對(duì)于輸入框的構(gòu)建，使用 _defaultFieldViewBuilder 靜態(tài)方法完成。

該方法，返回 _AutocompleteField 組件，本質(zhì)上也就是構(gòu)建了一個(gè) TextFormField 組件。

對(duì) Autocomplete 來(lái)說(shuō)，只是 RawAutocomplete 套了個(gè)馬甲，本質(zhì)上的功能還是在 RawAutocomplete 的狀態(tài)類中完成的。如下是 _RawAutocompleteState 的部分代碼，可以看出這里的浮層面板，是通過(guò) Overlay 實(shí)現(xiàn)的，另外通過(guò) CompositedTransformTarget 和 CompositedTransformFollower 對(duì)浮層進(jìn)行定位。

那本文就這樣，如果想簡(jiǎn)單地實(shí)現(xiàn)搜索聯(lián)想詞，Autocomplete 是一個(gè)很不錯(cuò)的選擇。

長(zhǎng)按右側(cè)二維碼

查看更多開發(fā)者精彩分享

?點(diǎn)擊屏末|閱讀原文|即刻報(bào)名參與"開發(fā)者說(shuō)·DTalk"