如何在flutter_typehead TypeAheadField小部件中设置字段的文本？答案

【问题标题】：How to set the text of the field in flutter_typehead TypeAheadField widget?如何在flutter_typehead TypeAheadField小部件中设置字段的文本？
【发布时间】：2019-11-19 12:30:40
【问题描述】：

我是 Dart 和 Flutter 的新手，我正在尝试使用这个模块 https://github.com/AbdulRahmanAlHamali/flutter_typeahead 来制作一个具有自动完成/“提前输入”功能的文本字段。

在他们给出的示例中，当用户选择其中一个建议时，他们会将用户路由到另一个视图，但我不想这样做。我只想将输入文本的值设置为用户选择的任何值。

这是我的代码：

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            TypeAheadField(
              textFieldConfiguration: TextFieldConfiguration(
                autofocus: true,
                style: DefaultTextStyle.of(context).style.copyWith(
                  fontStyle: FontStyle.italic
                ),
                decoration: InputDecoration(
                  border: OutlineInputBorder()
                )
              ),
              suggestionsCallback: (pattern) async {
                Completer<List<String>> completer = new Completer();
                completer.complete(<String>["cobalt", "copper"]);
                return completer.future;
              },
              itemBuilder: (context, suggestion){
                return ListTile(
                  title: Text(suggestion)
                );
              },
              onSuggestionSelected: (suggestion) {
              }
            )
          ],
        ),
      )
    );
  }
}

我不知道在onSuggestionSelectedparameter 函数中放入什么来实现我所描述的。

【问题讨论】：

标签： flutter dart autocomplete flutter-typeahead

【解决方案1】：

好的，我在我提供的同一个 github 链接上找到了解决方案，但由于示例不是完全相同的组件（TypeAheadFormField 而不是TypeAheadField），示例只是一段代码那是缺乏上下文，我必须查看源代码才能理解。

这里是如何继续。这实际上适用于TypeAheadFormField 和TypeAheadField。您必须创建一个 TextEditingController 并将其传递给 TypeAheadField 小部件的构造函数。然后在onSuggestionSelected 回调方法中设置TextEditingController 的text 属性。 TypeAheadField 小部件将使用该值重绘自身，我想这就是它的工作原理。

这是有效的代码：

class _MyHomePageState extends State<MyHomePage> {

  final TextEditingController _typeAheadController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            TypeAheadField(
              textFieldConfiguration: TextFieldConfiguration(
                autofocus: true,
                style: DefaultTextStyle.of(context).style.copyWith(
                  fontStyle: FontStyle.italic
                ),
                decoration: InputDecoration(
                  border: OutlineInputBorder()
                ),
                controller: this._typeAheadController
              ),
              suggestionsCallback: (pattern) async {
                Completer<List<String>> completer = new Completer();
                completer.complete(<String>["cobalt", "copper"]);
                return completer.future;
              },
              itemBuilder: (context, suggestion){
                return ListTile(
                  title: Text(suggestion)
                );
              },
              onSuggestionSelected: (suggestion) {
                this._typeAheadController.text = suggestion;
              }
            )
          ],
        ),
      )
    );
  }
}

【讨论】：

【解决方案2】：

在 TextEditingController 的状态类中定义一个局部变量并将其命名为 typeAheadController，然后将此参数添加到您的打字头小部件：

textFieldConfiguration: TextFieldConfiguration(
                            controller:  typeAheadController,
                            decoration: ....),

您可以使用

修改回调（事件）中的字段文本

typeAheadController.text = "your text"

【讨论】：