autocomplete - 如何在 AutoCompleteTextField 中设置值?
问题描述
我已经textfield
使用autocomplete_textfield
包在用户类型时显示自动完成建议。现在我想在 , 中显示选定的建议textfield
,为此itemSubmitted()
,我正在使用setState() { currentText = item.<suggestedText>}
在控制台中正确打印值的方法,但我不确定如何在textfield
. 如果我没记错的话,我需要使用TextEditingController
来检索和设置值,textfield
但不确定如何使用TextEditingController
inside AutoCompleteTextField
。
当前代码如下:
@override
void initState() {
_loadData();
textField = AutoCompleteTextField<Categories>(
style: new TextStyle(color: Colors.white, fontSize: 16.0),
decoration: new InputDecoration(
suffixIcon: Container(
width: 85.0,
height: 60.0,
color: Colors.green,
child: new IconButton(
icon: new Image.asset(
'assets/search_icon_ivory.png',
color: Colors.white,
height: 18.0,
),
onPressed: () {},
),
),
fillColor: Colors.black,
contentPadding: EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 20.0),
filled: true,
hintText: 'Search',
hintStyle: TextStyle(color: Colors.white)),
itemSubmitted: (item) {
setState(() {
currentText = item.autocompleteterm;
print(currentText);
});
},
submitOnSuggestionTap: true,
clearOnSubmit: true,
textChanged: (item) {
},
key: key,
suggestions: CategoryViewModel.categories,
textInputAction: TextInputAction.go,
itemBuilder: (context, item) {
return new Container(
color: Colors.black87,
child: Padding(
padding: EdgeInsets.all(8.0),
child: new Text(item.autocompleteterm,
style: TextStyle(
color: Colors.white70,
fontSize: 16.0
)),
),
);
},
itemSorter: (a, b) {
return a.autocompleteterm.compareTo(b.autocompleteterm);
},
itemFilter: (item, query) {
return item.autocompleteterm
.toLowerCase()
.startsWith(query.toLowerCase());
},
);
super.initState();
_getUser();
}
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
backgroundColor: Color(0xFF13212C),
appBar: AppBar(
title: Text('Demo'),
),
drawer: appDrawer(),
body: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Column(children: <Widget>[
textField,
]),
解决方案
这可以这样实现:
itemSubmitted: (item) {
setState(() => textField.textField.controller.text = item.autocompleteterm);
},
并使clearOnSubmit: false
能够在文本字段中显示选定的值。
推荐阅读
- sql-server - 如何获取包含 where 子句中提到的每个项目的记录
- python - 如何从谷歌视觉文本检测 API 获得批量响应?
- reactjs - 如何仅在 Semantic-UI React 中为 Form.Dropdown 显示警告消息?
- amazon-web-services - Terraform 云初始化 AWS
- oracle - 在 Oracle SQL Developer 中显示调试输出
- javascript - jQuery Datatable 按钮展开/折叠所有
- android - 如何将 ML Vision OCR 结果结构化为表格格式?
- redis - 将密钥存储在 redis 集中
- php - 使用php将上传的excel文件转换为csv
- php - 从 Route::get 找不到我的 Mailable 类