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

我是Dart和Flutter的新手，并且尝试使用https://github.com/AbdulRahmanAlHamali/flutter_typeahead模块创建具有自动完成功能/“提前输入”功能的文本字段。

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

这是我的代码:

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参数函数以实现我所描述的。

最佳答案

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

这是继续的方法。这实际上适用于TypeAheadFormField和TypeAheadField。您必须创建一个TextEditingController，然后传递给TypeAheadField小部件的构造函数。然后，在text回调方法中设置该TextEditingController的onSuggestionSelected属性。 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;
              }
            )
          ],
        ),
      )
    );
  }
}

关于flutter - 如何在flutter_typehead TypeAheadField小部件中设置字段的文本？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56961222/