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

Question

我是 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) {
              }
            )
          ],
        ),
      )
    );
  }
}

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

Answer 1

好的，我找到了实际上在我提供的同一个 github 链接上的解决方案，但是由于示例不是完全相同的组件（TypeAheadFormField而不是TypeAheadField），并且示例只是一段缺少上下文的代码，我不得不查看在源头上了解。

以下是如何进行。这实际上对TypeAheadFormField和 都有效TypeAheadField。您必须创建一个TextEditingController传递给TypeAheadField小部件构造函数的。然后在回调方法中设置它的text属性。该部件将使用该值重绘自身，我想这是它如何工作的。TextEditingControlleronSuggestionSelectedTypeAheadField

这是有效的代码：

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;
              }
            )
          ],
        ),
      )
    );
  }
}

Answer 2

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

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

您可以使用以下命令修改回调（事件）中的字段文本

typeAheadController.text = "your text"