Flutter 自动完成小部件不会清除文本

Question

我在 Android Studio 中有这个 flutter 自动完成小部件：

Autocomplete<String>(
  optionsBuilder: (TextEditingValue textEditingValue) {

    if (textEditingValue.text.isEmpty) {
      return const Iterable<String>.empty();
    }
    return animalSuggestions.where((option) {
      return option.toLowerCase().contains(textEditingValue.text.toLowerCase());
    });
  },

  onSelected: (String selection) {
    _animalController.text = selection; // Explicitly set value
  },

  fieldViewBuilder: (BuildContext context, TextEditingController textEditingController, FocusNode focusNode, VoidCallback onFieldSubmitted) {
    return TextField(
      controller: textEditingController,  // Use internal controller to manage suggestions
      focusNode: focusNode,
      decoration: InputDecoration(
        labelText: 'Search Animal',
        border: OutlineInputBorder(),
      ),
    );
  },

  optionsViewBuilder: (BuildContext context, AutocompleteOnSelected<String> onSelected, Iterable<String> options) {
    return Align(
      alignment: Alignment.topLeft,
      child: Material(
        elevation: 4.0,
        child: SizedBox(
          height: 200.0, // Set a fixed height for the options list
          child: ListView.builder(
            padding: EdgeInsets.all(8.0),
            itemCount: options.length,
            itemBuilder: (BuildContext context, int index) {
              final String option = options.elementAt(index);
              return ListTile(
                title: Text(option),
                onTap: () {
                  onSelected(option);
                },
              );
            },
          ),
        ),
      ),
    );
  },
),

在我的类中，我声明了一个名为 _animalController 的 TextEditingController，我用它来获取从自动完成下拉列表中选择的值

List<String> animalSuggestions = [];
TextEditingController _animalController = TextEditingController();

这一切似乎工作正常，直到我尝试使用此代码清除自动完成小部件中的文本

 _animalController.clear();

我可以看到 _animalController 文本被清除，但自动完成小部件中显示的文本仍然存在。我理解这是因为该小部件正在使用内部 textEditingController 来显示文本。我要么需要清除这个（我不知道如何），要么需要将内部 textEditingController 更改为 _animalController（我可以控制）。但是，当我这样做时，我的 optionsBuilder 逻辑（显然控制着我键入时如何过滤下拉列表）停止工作，并且我不再看到任何建议。有什么想法可以解决这个问题吗？

Answer 1

如果您使用外部变量，您可以清除：

TextEditingController textEditingController = TextEditingController();

和

        ElevatedButton(onPressed:(){
            textEditingController.clear();
            _animalController.clear();
          }, child: Container(height: 20,width: 20,color: Colors.blueAccent,),    
          ),

您需要清理 TextField 以从小部件中删除文本。

            fieldViewBuilder: (BuildContext context, _, FocusNode focusNode, VoidCallback onFieldSubmitted) {
              return TextField(
                controller: textEditingController,  // Use internal controller to manage suggestions
                focusNode: focusNode,
                decoration: InputDecoration(
                  labelText: 'Search Animal',
                  border: OutlineInputBorder(),
                ),
              );
            },