Flutter技术问题：如何为键盘添加自定义输入建议文本？

要实现指定TextFormField显示自定义输入建议的逻辑，可以使用Flutter的Autocomplete组件，它能完美整合你现有的TextFormField配置，同时提供自定义建议列表功能。

实现方案 #

1. 准备自定义建议列表：先定义好需要展示的建议内容（支持数字或文本）。
2. 整合Autocomplete与原有TextFormField：通过Autocomplete的fieldViewBuilder复用你原有的输入框配置，同时通过optionsBuilder实现输入匹配逻辑。

修改后的完整代码 #

// 自定义建议列表，可根据需求修改内容
final List<String> customSuggestions = ['12345', '67890', '112233', '445566'];

Autocomplete<String>(
  optionsBuilder: (TextEditingValue textEditingValue) {
    // 根据输入内容过滤匹配的建议项
    if (textEditingValue.text.isEmpty) {
      return const Iterable<String>.empty();
    }
    return customSuggestions.where((String option) {
      return option.contains(textEditingValue.text);
    });
  },
  onSelected: (String selection) {
    // 选中建议后更新输入框内容
    controller.text = selection;
    // 触发原有的onChanged回调（如果存在）
    if (onChanged != null) {
      onChanged!(selection);
    }
  },
  fieldViewBuilder: (BuildContext context, TextEditingController fieldController, FocusNode focusNode, VoidCallback onFieldSubmitted) {
    // 保留原有TextFormField的全部配置
    return TextFormField(
      controller: controller,
      focusNode: focusNode,
      textInputAction: TextInputAction.next,
      inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly],
      onTapOutside: (_) => FocusScope.of(context).unfocus(),
      decoration: InputDecoration(hintText: hintText),
      onChanged: onChanged,
      onFieldSubmitted: (value) => onFieldSubmitted(),
    );
  },
)

核心逻辑说明 #

• optionsBuilder：根据当前输入内容动态过滤建议，示例中使用包含匹配，可根据需求改为前缀匹配、模糊匹配等规则。
• onSelected：处理用户选中建议的行为，自动填充输入框并触发原有的输入变更回调。
• fieldViewBuilder：完全复用你原有的TextFormField配置，确保输入框的样式、限制条件与之前一致，同时整合Autocomplete的焦点和提交逻辑。

内容的提问来源于stack exchange，提问作者Nikiforos P