如何在 AutoCompleteTextField 中设置值?
How to set value in AutoCompleteTextField?
我 textfield
使用 autocomplete_textfield
包在用户键入时显示自动完成建议。现在我想在 textfield
中显示选定的建议,为此,在 itemSubmitted()
方法中,我使用 setState() { currentText = item.<suggestedText>}
在控制台中正确打印值,但我不确定如何在 textfield
中显示该值。如果我没记错的话,我需要使用 TextEditingController
来检索和设置 textfield
中的值,但不确定如何在 AutoCompleteTextField
中使用 TextEditingController
。
当前代码如下:
@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
能够在文本字段中显示选定的值。
我 textfield
使用 autocomplete_textfield
包在用户键入时显示自动完成建议。现在我想在 textfield
中显示选定的建议,为此,在 itemSubmitted()
方法中,我使用 setState() { currentText = item.<suggestedText>}
在控制台中正确打印值,但我不确定如何在 textfield
中显示该值。如果我没记错的话,我需要使用 TextEditingController
来检索和设置 textfield
中的值,但不确定如何在 AutoCompleteTextField
中使用 TextEditingController
。
当前代码如下:
@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
能够在文本字段中显示选定的值。