Flutter中点击TextField及键盘外部时如何保持键盘不自动收起？

要实现点击TextField或键盘外区域时键盘保持打开，只有通过代码主动关闭才收起，核心是阻止系统默认的焦点丢失行为，同时控制TextField的焦点状态。以下是两种实用的实现方式：

方法一：通过GestureDetector强制保持焦点 #

这种方法简单直接，在外层容器添加GestureDetector，点击外部时重新请求TextField的焦点，避免键盘收起：

完整代码示例 #

import 'package:flutter/material.dart';

class VocabularySuggestionPage extends StatefulWidget {
  const VocabularySuggestionPage({super.key});

  @override
  State<VocabularySuggestionPage> createState() => _VocabularySuggestionPageState();
}

class _VocabularySuggestionPageState extends State<VocabularySuggestionPage> {
  final FocusNode _textFieldFocus = FocusNode();
  final TextEditingController _inputController = TextEditingController();
  final List<String> _suggestions = ["苹果", "香蕉", "橙子", "葡萄", "西瓜"];

  // 主动关闭键盘的方法
  void _closeKeyboard() {
    _textFieldFocus.unfocus();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("词汇输入"),
        actions: [
          TextButton(
            onPressed: _closeKeyboard,
            child: const Text("关闭键盘"),
          )
        ],
      ),
      // 外层GestureDetector拦截所有点击事件
      body: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          // 点击外部时，重新请求TextField的焦点，维持键盘打开状态
          if (_textFieldFocus.canRequestFocus) {
            FocusScope.of(context).requestFocus(_textFieldFocus);
          }
        },
        child: Column(
          children: [
            TextField(
              focusNode: _textFieldFocus,
              controller: _inputController,
              decoration: const InputDecoration(
                hintText: "输入或选择词汇...",
                contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                border: OutlineInputBorder(),
              ),
            ),
            // 词汇建议列表
            Expanded(
              child: ListView.builder(
                itemCount: _suggestions.length,
                itemBuilder: (ctx, index) {
                  return ListTile(
                    title: Text(_suggestions[index]),
                    onTap: () {
                      // 点击建议词汇，追加到输入框
                      setState(() {
                        if (_inputController.text.isNotEmpty) {
                          _inputController.text += " ";
                        }
                        _inputController.text += _suggestions[index];
                      });
                      // 确保焦点回到TextField，防止意外丢失
                      _textFieldFocus.requestFocus();
                    },
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

方法二：监听焦点变化，自动恢复焦点 #

如果需要更精细的控制（比如区分主动关闭和系统自动失焦），可以监听FocusNode的状态变化，当系统尝试移除焦点时自动恢复：

关键代码片段 #

bool _isActivelyClosing = false;

@override
void initState() {
  super.initState();
  _textFieldFocus.addListener(() {
    // 当焦点丢失，且不是主动关闭时，重新请求焦点
    if (!_textFieldFocus.hasFocus && !_isActivelyClosing) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        _textFieldFocus.requestFocus();
      });
    }
  });
}

// 修改主动关闭方法
void _closeKeyboard() {
  setState(() {
    _isActivelyClosing = true;
  });
  _textFieldFocus.unfocus();
  // 重置标记，确保下次能正常恢复焦点
  setState(() {
    _isActivelyClosing = false;
  });
}

核心注意事项 #

• HitTestBehavior.opaque：必须给GestureDetector设置这个属性，确保它能捕获所有区域的点击事件，包括空白区域。
• 建议点击后重设焦点：点击建议列表时，主动调用_textFieldFocus.requestFocus()，避免列表的点击事件意外夺走TextField的焦点。
• 资源释放：记得在dispose方法中销毁FocusNode和TextEditingController，避免内存泄漏。

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