仅当用户键入颤动时才使用 TypeAheadField 显示建议答案

【问题标题】：Show suggestion using TypeAheadField only when user type flutter仅当用户键入颤动时才使用 TypeAheadField 显示建议
【发布时间】：2021-07-30 04:08:50
【问题描述】：

我使用TypeAheadField 包创建了一个包含建议的文本字段。我只想在用户输入时显示建议（而不是在用户点击 textField 时）。但正如 pub [https://pub.dev/packages/flutter_typeahead][1] 上显示的那样，这个例子就是我要找的。p>

我的代码：

TypeAheadField(
                                              
                                              textFieldConfiguration:
                                                  TextFieldConfiguration(

                                                autofocus: false,
                                                decoration: InputDecoration(
                                                  border: InputBorder.none,
                                                  focusedBorder:
                                                      InputBorder.none,
                                                  enabledBorder:
                                                      InputBorder.none,
                                                  errorBorder:
                                                      InputBorder.none,
                                                  disabledBorder:
                                                      InputBorder.none,
                                                  hintText: localization
                                                      .insertCustomerName,
                                                ),
                                                controller:
                                                    _typeAheadController,
                                              ),
                                              suggestionsCallback:
                                                  (pattern) async {
                                                return await getSuggestions(
                                                    pattern);
                                              },
                                              hideSuggestionsOnKeyboardHide:
                                                  true,
                                              hideOnEmpty: true,

                                              itemBuilder: (context,
                                                  String suggestion) {
                                                return Padding(
                                                  padding:
                                                      const EdgeInsets.all(
                                                          10.0),
                                                  child: Text(
                                                    suggestion,
                                                  ),
                                                );
                                              },
                                              onSuggestionSelected:
                                                  (String suggestion) {
                                                _typeAheadController.text =
                                                    suggestion;
                                              },

                                            ),

谢谢 [1]：https://pub.dev/packages/flutter_typeahead

【问题讨论】：

标签： flutter autocomplete typeahead

【解决方案1】：

在您的 suggestionsCallback 函数中，您可以尝试这样的操作：

suggestionsCallback: (pattern) async {
  if (pattern != null && pattern.length > 0) {
    return await getSuggestions(pattern);
  } else {
    return [];
  }
},

【讨论】：

感谢您的回答。它现在工作正常，欣赏它;）。我还有其他问题，建议框会闪烁一秒钟，我不知道为什么会这样，或者可能是它加载了建议框。那是糟糕的用户体验哈哈。有什么解决办法吗？谢谢
哦刚刚找到了，添加属性 hideOnLoading: true。

【解决方案2】：

对我来说很好用。

TypeAheadFormField(
    direction: AxisDirection.down,
    textFieldConfiguration: TextFieldConfiguration(
      controller: controller,
      style: primary14PxNormal.apply(color: blackColor),
      autofocus: false,
      enabled: true,
      decoration: InputDecoration(
          fillColor: whiteColor,
          filled: true,
          focusedBorder: textFormFieldBorderStyle,
          disabledBorder: textFormFieldBorderStyle,
          enabledBorder: textFormFieldBorderStyle,
          errorBorder: textFormFieldBorderStyle,
          focusedErrorBorder: textFormFieldBorderStyle,
          contentPadding: EdgeInsets.fromLTRB(10.0, 16.0, 10.0, 16.0),
          hintText: "Choose a Project",
          hintStyle: primary14PxBold.copyWith(fontSize: isDisplayDesktop(context) ? 15 : 12,
              fontWeight: FontWeight.w500,
              color: hintTextColor),
          border: new OutlineInputBorder(borderSide: new BorderSide(color: borderColor)),
          suffixIcon: Icon(Icons.arrow_drop_down, color: primaryColor)),
      onChanged: (text) {
        setState(() {
          clearCallback!();
        });
      },
    ),
    validator: (value) {
      return validationFunction != null ? validationFunction(value) : null;
    },
    suggestionsBoxDecoration: SuggestionsBoxDecoration(color: whiteColor),
    suggestionsCallback: (pattern) async {
      List<String> searchCityArray = [];
      if(controller.text.length > 0){
        searchCityArray.add(pattern);
        return searchCityArray;
      }
      return searchCityArray;
    },
    errorBuilder: (context, error) {
      return ListTile(
        title: Text(
          error.toString(),
          style: primary14PxNormal.copyWith(color: titleColor),
        ),
      );
    },
    itemBuilder: (context, String? project) {
      return project == null
          ? new Container()
          : ListTile(
        title: Text(
          project,
          style: primary14PxNormal.copyWith(color: titleColor),
        ),
      );
    },
    onSuggestionSelected: (String? suggestion) {
      setState(() {
        if (suggestion != null) {
          FocusScope.of(context).unfocus();
          controller.text = suggestion;
          if (selectionCallBack != null) {
            selectionCallBack(suggestion);
          }
        }
      });
    });

【讨论】：