flutter - 在 flutter 中选择后清除自动完成文本？

Question

我已经创建了一个自动完成的文本字段:

                Autocomplete(
                          optionsBuilder: (TextEditingValue textEditingValue){
                            if (textEditingValue.text.isEmpty){
                              return const Iterable<String>.empty();
                            }
                            else{
                              return autoCompleteData.where((word) => word.toLowerCase()
                                  .contains(textEditingValue.text.toLowerCase())
                              );
                            }
                          },
                          onSelected: (value) {
                            print("this is the value $value");
                            setState((){
                              selected=value.toString();
                            });
                            
                          }
                      ),

当我输入一个 json 文件时，它会给我一些建议。现在，每当我选择它必须清除框的值时，我想要什么。

Answer 1

为了实现这一点，我们应该可以访问文本编辑 Controller ，这样你就可以做一些类似于访问自动完成中的文本编辑 Controller 的事情

late TextEditingController textEditingController;
        Autocomplete(
          optionsBuilder: (TextEditingValue textEditingValue) {
            if (textEditingValue.text.isEmpty) {
              return const Iterable<String>.empty();
            } else {
              return _allSpecialitySkills
                  .where((word) => word.name.toLowerCase().contains(textEditingValue.text.toLowerCase()));
            }
          },
          onSelected: (value) {
            print("this is the value $value");
            textEditingController.text = "";
          },
          fieldViewBuilder: (BuildContext context, TextEditingController fieldTextEditingController,
              FocusNode fieldFocusNode, VoidCallback onFieldSubmitted) {
            textEditingController = fieldTextEditingController;
            return TextField(
              controller: fieldTextEditingController,
              focusNode: fieldFocusNode,
              style: const TextStyle(fontWeight: FontWeight.bold),
            );
          },
        )

找到我为实现上述目标所做的简单项目，

List<String> countries = <String>[
  "Africa",
  "Antarctica",
  "Asia",
  "Australia",
  "Europe",
  "North America",
  "South America",
  "Srilanka",
  "India",
  "China",
  "Japan",
  "Koria",
  "Thai",
];

class AutoCompleteExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _AutoCompleteExampleState();
}

class _AutoCompleteExampleState extends State<AutoCompleteExample> {
  late TextEditingController textEditingController;
  @override
  Widget build(BuildContext context) {
    return Autocomplete(
      optionsBuilder: (TextEditingValue textEditingValue) {
        if (textEditingValue.text.isEmpty) {
          return const Iterable<String>.empty();
        } else {
          return countries.where((word) => word.toLowerCase().startsWith(textEditingValue.text.toLowerCase()));
        }
      },
      onSelected: (value) {
        print("this is the value $value");
        textEditingController.text = "";
      },
      fieldViewBuilder: (BuildContext context, TextEditingController fieldTextEditingController,
          FocusNode fieldFocusNode, VoidCallback onFieldSubmitted) {
        textEditingController = fieldTextEditingController;
        return TextField(
          controller: fieldTextEditingController,
          focusNode: fieldFocusNode,
          style: const TextStyle(fontWeight: FontWeight.bold),
        );
      },
    );
  }
}