Flutter TypeAhead
一个用于 Flutter 的 TypeAhead (自动完成) 小部件，您可以在其中为用户键入时显示建议。
特点
- 在其他小部件的顶部显示一个浮动的建议叠加层
- 允许您通过一个
构建器函数来指定建议的外观 - 允许您指定用户点击建议时会发生什么
- 接受传统TextField的所有参数，例如
装饰、自定义 TextEditingController、文本样式等。 - 提供两个版本，一个普通版本和一个FormField
版本，可接受验证、提交等。 - 提供高度可定制性；您可以自定义建议框的装饰、
加载栏、动画、去抖动持续时间等。
安装
请参阅pub上的安装说明。
用法示例
您可以使用以下方式导入该软件包
import 'package:flutter_typeahead/flutter_typeahead.dart';
然后按如下方式使用它
示例 1
TypeAheadField(
textFieldConfiguration: TextFieldConfiguration(
autofocus: true,
style: DefaultTextStyle.of(context).style.copyWith(
fontStyle: FontStyle.italic
),
decoration: InputDecoration(
border: OutlineInputBorder()
)
),
suggestionsCallback: (pattern) async {
return await BackendService.getSuggestions(pattern);
},
itemBuilder: (context, suggestion) {
return ListTile(
leading: Icon(Icons.shopping_cart),
title: Text(suggestion['name']),
subtitle: Text('\$${suggestion['price']}'),
);
},
onSuggestionSelected: (suggestion) {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => ProductPage(product: suggestion)
));
},
)
在上面的代码中，textFieldConfiguration属性允许我们
根据需要配置显示的TextField。在此示例中，我们正在
配置autofocus、style和decoration属性。
suggestionsCallback会接收用户键入的搜索字符串，
并期望同步或异步返回数据列表。在此示例中，我们正在调用一个异步函数
名为BackendService.getSuggestions，它获取建议列表。
名为BackendService.getSuggestions，它获取建议列表。
名为BackendService.getSuggestions，它获取建议列表。
itemBuilder用于为每个建议构建一个小部件。
在此示例中，我们构建了一个简单的ListTile，其中显示了名称和
物品的价格。请注意，您不应在此处提供onTap
回调。TypeAhead小部件会处理它。
onSuggestionSelected是用户点击建议时调用的回调。
在此示例中，当用户点击一个
建议时，我们会导航到一个页面，该页面显示了
被点击产品的相关信息。
示例 2
这是另一个示例，我们在其中将TypeAheadFormField用于Form
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
final TextEditingController _typeAheadController = TextEditingController();
String _selectedCity;
...
Form(
key: this._formKey,
child: Padding(
padding: EdgeInsets.all(32.0),
child: Column(
children: <Widget>[
Text(
'What is your favorite city?'
),
TypeAheadFormField(
textFieldConfiguration: TextFieldConfiguration(
controller: this._typeAheadController,
decoration: InputDecoration(
labelText: 'City'
)
),
suggestionsCallback: (pattern) {
return CitiesService.getSuggestions(pattern);
},
itemBuilder: (context, suggestion) {
return ListTile(
title: Text(suggestion),
);
},
transitionBuilder: (context, suggestionsBox, controller) {
return suggestionsBox;
},
onSuggestionSelected: (suggestion) {
this._typeAheadController.text = suggestion;
},
validator: (value) {
if (value.isEmpty) {
return 'Please select a city';
}
},
onSaved: (value) => this._selectedCity = value,
),
SizedBox(height: 10.0,),
RaisedButton(
child: Text('Submit'),
onPressed: () {
if (this._formKey.currentState.validate()) {
this._formKey.currentState.save();
Scaffold.of(context).showSnackBar(SnackBar(
content: Text('Your Favorite City is ${this._selectedCity}')
));
}
},
)
],
),
),
)
在这里，我们将textFieldConfiguration的controller属性设置为
我们称之为_typeAheadController的TextEditingController。
我们在onSuggestionSelected回调中使用此控制器将TextField的值设置为选定的建议。
validator回调可以像任何FormField.validator一样使用
函数。在我们的示例中，它会检查是否输入了值，
如果没有，则显示错误消息。onSaved回调用于将
字段的值保存到_selectedCity成员变量。
transitionBuilder允许我们自定义建议框的动画。
在此示例中，我们立即返回建议框，
这意味着我们不希望有任何动画。
自定义
TypeAhead小部件由一个TextField和一个在用户键入时显示的建议框组成。
两者都高度可定制。
自定义TextField
您可以使用textFieldConfiguration属性来自定义文本字段。
您为此属性提供TextFieldConfiguration的实例，
它允许您配置TextField的所有常用属性，例如
decoration、style、controller、focusNode、autofocus、enabled，
等等。
自定义建议框
TypeAhead为建议框提供了默认配置。但是，您可以
覆盖其中大多数。
自定义加载、错误和“未找到项”消息
您可以使用loadingBuilder、errorBuilder和noItemsFoundBuilder来
自定义相应的部件。例如，要显示自定义错误
widget
errorBuilder: (BuildContext context, Object error) =>
Text(
'$error',
style: TextStyle(
color: Theme.of(context).errorColor
)
)
自定义动画
您可以通过三个参数来自定义建议框动画：
animationDuration、animationStart和transitionBuilder。
animationDuration指定动画应持续多长时间，而
animationStart指定动画应从哪个点（0.0到1.0之间）开始。transitionBuilder接受suggestionsBox和
animationController作为参数，并应返回一个使用animationController来设置suggestionsBox显示动画的小部件。
例如
transitionBuilder: (context, suggestionsBox, animationController) =>
FadeTransition(
child: suggestionsBox,
opacity: CurvedAnimation(
parent: animationController,
curve: Curves.fastOutSlowIn
),
)
这使用了FadeTransition
来将suggestionsBox淡入视图。请注意，
animationController是如何作为动画的父级提供的。
为了完全移除动画，transitionBuilder应直接
返回suggestionsBox。此回调也可以用于包装
suggestionsBox以任何所需的小部件，不一定是用于动画。
自定义去抖动持续时间
建议框不会为用户键入的每个字符触发。而是，
我们等到用户空闲一段时间，然后调用
suggestionsCallback。持续时间默认为300毫秒，但可以
使用debounceDuration参数进行配置。
自定义建议框的偏移量
默认情况下，建议框显示在TextField下方5像素处。
您可以通过更改suggestionsBoxVerticalOffset属性来更改此设置。
自定义建议框的装饰
您还可以使用suggestionsBoxDecoration属性来自定义建议框的装饰。
例如，要删除建议框的阴影，您可以编写
https://github.com/AbdulRahmanAlHamali/flutter_typeahead
suggestionsBoxDecoration: SuggestionsBoxDecoration(
elevation: 0.0
)
