如何使用自动完成小部件 Flutter 中的 TextEditingController

如何解决如何使用自动完成小部件 Flutter 中的 TextEditingController

我有一个问题，我需要使用小部件“自动完成”的 TexteditingController。是在步进器改变阶段时使用清除功能

我需要这样做，因为如果我返回一个阶段，之前输入的文本仍然存在这是自动完成代码：

Autocomplete<Profesional>(
                     
                      optionsviewbuilder: (BuildContext context,AutocompleteOnSelected<Profesional> onSelected,Iterable<Profesional> options) {
                        return Align(
                          alignment: Alignment.topLeft,child: Material(
                            elevation: 4.0,child: SizedBox(
                              height: 200.0,child: ListView.builder(
                                padding: const EdgeInsets.all(8.0),itemCount: options.length,itemBuilder: (BuildContext context,int index) {
                                  final Profesional option =
                                      options.elementAt(index);
                                  return GestureDetector(
                                    onTap: () {
                                      onSelected(option);
                                    },child: ListTile(
                                      title: Text(option.cod),),);
                                },);
                      },optionsBuilder: (TextEditingValue query) {
                        return viewmodel.efectores.where((efector) {
                          return efector.cod
                                  .toLowerCase()
                                  .contains(query.text.toLowerCase()) ||
                              efector.nombre
                                  .toLowerCase()
                                  .contains(query.text.toLowerCase());
                        });
                      },fieldviewbuilder: (BuildContext context,TextEditingController textEditingController,FocusNode focusNode,VoidCallback onFieldSubmitted) {
                        return TextFormField(
                          controller: textEditingController,decoration: const Inputdecoration(
                            hintText: 'Seleccione Efector',autofocus: true,focusNode: focusNode,onFieldSubmitted: (String value) {
                            onFieldSubmitted();
                          },displayStringForOption: (efector) {
                        return efector.cod + ' - ' + efector.nombre;
                      },onSelected: (efector) {
                        
                        viewmodel.efector = efector;
                      }),

解决方法

您可以使用 RawAutocomplete 代替 Autocomplete。

在这种情况下，您可以传递自己的 TextEditingController 和 FocusNode。然后在需要时使用 TextEditingController clear 方法清除文本。

如果您需要从父窗口小部件用户全局键清除自动完成视图。

在此处查看示例代码：

class CustomAutocomplete extends StatelessWidget {
  final TextEditingController _textEditingController = TextEditingController();
  final FocusNode _focusNode = FocusNode();
  final GlobalKey _autocompleteKey = GlobalKey();

  final List<String> _options = <String>[
    'aardvark','bobcat','chameleon',];

  CustomAutocomplete({Key? key}) : super(key: key);

  void clear() {
    _textEditingController.clear();
  }

  @override
  Widget build(BuildContext context) {
    return RawAutocomplete<String>(
      key: _autocompleteKey,focusNode: _focusNode,textEditingController: _textEditingController,optionsBuilder: (TextEditingValue textEditingValue) {
        return _options.where((String option) {
          return option.contains(textEditingValue.text.toLowerCase());
        }).toList();
      },optionsViewBuilder: (BuildContext context,AutocompleteOnSelected<String> onSelected,Iterable<String> options) {
        return Material(
          elevation: 4.0,child: ListView(
            children: options
                .map((String option) => GestureDetector(
                      onTap: () {
                        onSelected(option);
                      },child: ListTile(
                        title: Text(option),),))
                .toList(),);
      },);
  }
}