首页 > 解决方案 > 如何在 AutoCompleteTextField 中设置值?

问题描述

我已经textfield使用autocomplete_textfield包在用户类型时显示自动完成建议。现在我想在 , 中显示选定的建议textfield,为此itemSubmitted(),我正在使用setState() { currentText = item.<suggestedText>}在控制台中正确打印值的方法,但我不确定如何在textfield. 如果我没记错的话,我需要使用TextEditingController来检索和设置值,textfield但不确定如何使用TextEditingControllerinside 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,
              ]),

标签: autocompleteflutterautosuggest

解决方案


这可以这样实现:

itemSubmitted: (item) {
          setState(() => textField.textField.controller.text = item.autocompleteterm);
          },

并使clearOnSubmit: false能够在文本字段中显示选定的值。


推荐阅读