是否有向 Flutter Autocomplete 小部件添加占位符/提示文本？答案

【问题标题】：Is there anyway to add a placeholder/hint text to the Flutter Autocomplete widget?是否有向 Flutter Autocomplete 小部件添加占位符/提示文本？
【发布时间】：2022-10-23 17:38:08
【问题描述】：

我正在尝试向自动完成小部件添加提示/占位符，类似于 TextField 中使用的内容。理想情况下，当用户输入任何内容时，此文本将消失，并在字段为空时重新出现。梳理文档，initialValue 是我唯一能找到的，但问题是当用户键入时文本会保留。我目前正在考虑使用 Focus 小部件的解决方法，并在输入聚焦时清除 initialValue 并在移除焦点时重新填充。这可能需要使用存储占位符文本的状态变量。

还有比这更干净的方法吗？

显然这不是功能代码，但第一个想法是这样的：

String placeholder; // state variable
...
Autocomplete(initialValue: placeholder, ...);
...
Autocomplete.onFocus(): setState(placeholder = "");
Autocomplete.notFocused() && input.length == 0: setState(placeholder = "Enter text here...");

【问题讨论】：

标签： flutter dart

【解决方案1】：

找到了一个很好的解决方案。在这里张贴给其他想知道的人。

我只是从 Autocomplete 小部件切换到 RawAutocomplete 小部件。后者公开了可以添加提示文本的底层文本字段。

老的

Autocomplete<T>(
    optionsViewBuilder: (context, onSelected, options) {
      ...
    },
    optionsBuilder: (textEditingValue) {
      ...
    },
  ),
);

新的

RawAutocomplete<T>(
    fieldViewBuilder:
        ((context, textEditingController, focusNode, onFieldSubmitted) =>
            TextFormField( // exposed text field
              ...
              decoration: const InputDecoration(hintText: 'Input here...'), // placeholder text
              ...
            )),
    optionsViewBuilder: (context, onSelected, options) {
      ...
    },
    optionsBuilder: (textEditingValue) {
      ...
    },
  );

Here's 有关 RawAutocomplete 的具体实现的更多文档。

【讨论】：

【解决方案2】：

你可以使用包轻松自动完成 https://pub.dev/packages/easy_autocomplete

像这样：

Container(
                                        padding: EdgeInsets.only(left:10.0),
                                        width: (GeneralUtils.deviceIsTablet? screenWidth*0.35:screenWidth *0.25),
                                        height: 50,
                                        child: FutureBuilder(
                                            future: getPhones(),
                                            builder: (context, AsyncSnapshot snapshot) {
                                              
                                                return EasyAutocomplete(
                                                    inputTextStyle: TextStyle(
                                                      color: CustomColors.textLightPrimaryColor,
                                                      fontSize: 14,
                                                      fontWeight: FontWeight.w800,
                                                    ),
                                                   
                                                    controller: _clientPhoneController,
                                                    suggestions: _phoneList,
                                                    onChanged: (_) => null,
                                                    onSubmitted:(_) async{
                                                      getDataByPhone(_clientPhoneController.text);
                                                    },
                                                    decoration: InputDecoration(
                                                      hintText:'Enter the phone',
                                                      hintStyle: TextStyle(
                                                          fontSize: 14,
                                                          fontWeight: FontWeight.w600,
                                                          color: CustomColors.textLightPrimaryColor.withOpacity(0.4)
                                                      ),
                                                      enabledBorder: UnderlineInputBorder(
                                                        borderSide: BorderSide(color: CustomColors.textLightPrimaryColor),
                                                      ),
                                                      focusedBorder: UnderlineInputBorder(
                                                        borderSide: BorderSide(color: CustomColors.textLightPrimaryColor),
                                                      ),
                                                    ),
                                                    suggestionBuilder: (data) {
                                                      return Text(
                                                        data,
                                                        style: TextStyle(
                                                          color: CustomColors.textLightPrimaryColor,
                                                          fontSize: 14,
                                                          fontWeight: FontWeight.w600,
                                                        ),
                                                      );
                                                    }
                                                );
                                             
                                            }),

【讨论】：

有趣的。如果可能的话，我一直希望避免合并外部软件包，但我很欣赏这个答案。

【解决方案3】：

您只需将“fieldViewBuilder”添加到您的“自动完成”中，返回带有提示文本的 TextformField ：

Autocomplete<String>(
                                  optionsBuilder:
                                      (TextEditingValue textEditingValue) {
                                    ...
                                  },
                                  fieldViewBuilder: ((context,
                                      textEditingController,
                                      focusNode,
                                      onFieldSubmitted) {
                                    return TextFormField(
                                      controller: textEditingController,
                                      focusNode: focusNode,
                                      onEditingComplete: onFieldSubmitted,
                                      decoration: const InputDecoration(
                                          hintText: 'Your hint text'),
                                    );
                                  }),
                                  
                                ),

【讨论】：