Flutter Widget 之Autocomplete
你知道的，没有人喜欢打字。所以当表单输入可以完成你的句子时那就太好了。
这是一个常见的UI模式，你可以使用一个布局构造器，一个堆栈，在用户输入时在下面的一些列表磁铁以及...
Flutter中有一个小部件是为其量身打造的，Autocomplete为您的用户提供现成的自动填充的体验。
将任何文本输入部件都换成自动填充部件并提供一个optionsBuilder。
optionsBuilder是一个方法，它从文本书睿中获取最新的textEditingValue属性，并返回一个可迭代的匹配。这些匹配可以是字符串或自定义类型
// TextField() Autocomplete<String>( optionsBuilder: (textEditingValue) { return data.filter( (entry) => entry.contains(textEditingValue.text), ); } ) 复制代码Autocomplete<MyCustomType>( optionsBuilder: (textEditingValue) { return myObjects.filter( (obj) => obj.name.contains( textEditingValuue.text ), ); }, ) 复制代码你可以用displayStringForOption参数将其变成字符串
Autocomplete<MyCustomType>( optionsBuilder: (...) {}, displayStringForOption: (MyCustomType obj) => obj.name, ) 复制代码为了控制这些显示匹配的外观，使用optionsViewBuilder回调
Autocomplete<MyCustomType>( optionsBuilder: (...) {}, displayStringForOption: (MyCustomType obj) => obj.name, optionsViewBuilder: ( context, onSelected, options, ) => ListView.builder( itemCount: options.length, itemBuilder: (context, index) { return Widgets(options[i]); }, ), ) 复制代码为了知道你的用户何时点击其中一个匹配，提供一个onSelected函数
Autocomplete<MyCustomType>( optionsBuidler: (...) {}, displayStringForOption: (...) {}, optionsViewBuilder: (...) {}, onSelected: (MyCustomType obj) { stateManagement.toggle(obj); }, ) 复制代码最后，如果你原来的文本输入很时尚，而autocomplete提供的文本输入相比之下很无聊，请使用fieldViewBuilder参数，来保持对输入的完全控制
Autocomplete<MyCustomType>( optionsBuilder: (...) {}, displayStringForOption: (...) {}, optionsViewBuilder: (...) {}, onSelected: (...) {}, fieldViewBuilder: ( context, textEditingController, focusNode, oonFieldSubmitted, ) => MyFancyTextInput(...), ) 复制代码如果想了解有关Autocomplete的内容，或者关于Flutter的其他功能
作者：程序员界的小学生
链接：https://juejin.cn/post/7170182768838574116