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回调方法中设置该TextEditingController的{{1}}属性。 onSuggestionSelected小部件将使用该值重绘自身，我想这就是它的工作原理。

这是有效的代码：

TypeAheadField

Answer 2

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

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

您可以使用

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

typeAheadController.text = "your text"

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

2 个答案: