Flutter中点击TextFormField建议时如何阻止键盘收起？

核心思路是点击建议后强制让TextFormField保持焦点，阻止系统自动收起键盘，以下是两种常见实现方式：

方式一：自定义建议列表+FocusNode控制焦点 #

初始化FocusNode绑定到TextFormField，点击建议时手动请求焦点并调整光标位置：

class _SuggestionPageState extends State<SuggestionPage> {
  final FocusNode _inputFocusNode = FocusNode();
  final TextEditingController _inputController = TextEditingController();
  final List<String> _suggestions = ['Flutter', 'Dart', 'Widget', 'State'];

  @override
  void dispose() {
    _inputFocusNode.dispose();
    _inputController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('连续添加建议')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextFormField(
              focusNode: _inputFocusNode,
              controller: _inputController,
              decoration: const InputDecoration(
                hintText: '输入内容获取建议',
                border: OutlineInputBorder(),
              ),
            ),
            // 展示建议列表
            if (_inputController.text.isNotEmpty)
              Wrap(
                spacing: 8,
                children: _suggestions.map((suggestion) {
                  return GestureDetector(
                    onTap: () {
                      // 将建议追加到输入框
                      _inputController.text += '$suggestion ';
                      // 调整光标到文本末尾
                      _inputController.selection = TextSelection.fromPosition(
                        TextPosition(offset: _inputController.text.length),
                      );
                      // 强制请求焦点，阻止键盘收起
                      FocusScope.of(context).requestFocus(_inputFocusNode);
                    },
                    child: Chip(label: Text(suggestion)),
                  );
                }).toList(),
              ),
          ],
        ),
      ),
    );
  }
}

方式二：使用Autocomplete组件自定义选中行为 #

如果用Flutter自带的Autocomplete，默认点击选项会收起键盘，重写onSelected方法手动保持焦点：

Autocomplete<String>(
  optionsBuilder: (TextEditingValue textValue) {
    if (textValue.text.isEmpty) return const [];
    return ['Flutter', 'Dart', 'Widget', 'State']
        .where((item) => item.toLowerCase().contains(textValue.text.toLowerCase()));
  },
  fieldViewBuilder: (context, controller, focusNode, _) {
    return TextFormField(
      controller: controller,
      focusNode: focusNode,
      decoration: const InputDecoration(
        hintText: '搜索建议',
        border: OutlineInputBorder(),
      ),
    );
  },
  onSelected: (String selected) {
    // 获取当前输入框的焦点节点
    final currentFocus = FocusScope.of(context).focusedChild;
    // 追加选中的建议到输入框并调整光标
    final newText = '${_inputController.text}$selected ';
    _inputController.value = TextEditingValue(
      text: newText,
      selection: TextSelection.fromPosition(
        TextPosition(offset: newText.length),
      ),
    );
    // 重新请求焦点，保持键盘打开
    if (currentFocus != null) {
      FocusScope.of(context).requestFocus(currentFocus);
    }
  },
)

关键注意点 #

• 操作完建议后，务必将光标移到文本末尾，提升用户输入体验
• 记得在组件销毁时释放FocusNode和TextEditingController，避免内存泄漏

内容的提问来源于stack exchange，提问作者vedant kulkarni