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

Posted 2023-02-23

【中文标题】如何从自动完成小部件 Flutter 中使用 TextEditingController

【英文标题】：how to use TextEditingController from Autocomplete widget Flutter

【发布时间】：2021-06-30 06:32:34

【问题描述】：

我需要使用小部件“自动完成”的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;
                      ),

【参考方案1】：

您可以使用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(),
          ),
        );
      ,
    );
  

【讨论】：

谢谢大家。这对我帮助很大。谢谢！