Flutter PWA移动端：如何阻止键盘因点击外部或滚动关闭？

问题核心 #

在移动浏览器访问的Flutter PWA中，需要让输入框键盘始终保持显示，仅在特定条件（如点击键盘的Done按钮）下才允许关闭。之前尝试的GestureDetector、NotificationListener、TapRegion等方案，都会导致键盘先关闭再重新弹出的闪烁问题，无法真正维持焦点。

为什么之前的方法无效 #

Flutter Web/PWA的焦点管理受浏览器原生行为限制：

• 点击输入框外部或滚动页面时，浏览器会主动夺走输入框焦点，这是浏览器的默认行为，Flutter组件层面的拦截无法完全阻止。
• 重新调用requestFocus本质是先失焦再获焦，必然触发键盘的关闭-重新打开流程，导致闪烁。

可行解决方案 #

1. 拦截浏览器层面的失焦触发事件 #

通过JS互操作直接干预浏览器的事件，阻止非允许情况下的输入框失焦：

步骤1：添加JS代码到web/index.html

在<body>标签内添加：

<script>
let canLoseFocus = false;
const inputSelector = 'input, textarea';

function setCanLoseFocus(value) {
  canLoseFocus = value;
  if (canLoseFocus) {
    document.removeEventListener('click', preventUnwantedBlur);
    document.removeEventListener('scroll', preventUnwantedBlur);
  } else {
    document.addEventListener('click', preventUnwantedBlur, { passive: false });
    document.addEventListener('scroll', preventUnwantedBlur, { passive: false });
  }
}

function preventUnwantedBlur(e) {
  const input = document.querySelector(inputSelector);
  if (!input || canLoseFocus) return;
  
  // 阻止点击外部导致的失焦
  if (e.type === 'click' && !input.contains(e.target)) {
    e.preventDefault();
    input.focus();
  }
  // 阻止滚动导致的失焦
  if (e.type === 'scroll') {
    input.focus();
  }
}
</script>

步骤2：在Flutter中调用JS方法

引入dart:js包，控制canLoseFocus状态：

import 'dart:js' as js;

// 初始化时设置不允许失焦
@override
void initState() {
  super.initState();
  js.context.callMethod('setCanLoseFocus', [false]);
}

// 点击Done按钮时允许失焦
onFieldSubmitted: (value) {
  js.context.callMethod('setCanLoseFocus', [true]);
  setState(() {
    canLoseFocus = true;
  });
  FocusScope.of(context).unfocus();
  _model.textFieldFocusNode?.unfocus();
},

2. 优化Flutter焦点监听，减少闪烁 #

给FocusNode添加监听，在焦点即将丢失时立即重新请求，尽量缩小闪烁的时间窗口：

@override
void initState() {
  super.initState();
  _model.textFieldFocusNode.addListener(() {
    if (!_model.textFieldFocusNode.hasFocus && !canLoseFocus) {
      // 在下一帧立即重新请求焦点
      WidgetsBinding.instance.addPostFrameCallback((_) {
        FocusScope.of(context).requestFocus(_model.textFieldFocusNode);
      });
    }
  });
}

3. 调整滚动组件行为 #

如果页面需要滚动，避免使用默认滚动组件的物理效果，改用自定义滚动控制：

SingleChildScrollView(
  physics: canLoseFocus ? const AlwaysScrollableScrollPhysics() : const NeverScrollableScrollPhysics(),
  child: // 页面内容
)

或者用GestureDetector处理滚动手势，手动控制滚动而不触发浏览器的默认失焦行为。

关键注意事项 #

• PWA的键盘行为完全依赖浏览器，不同浏览器（Chrome、Safari）可能存在差异，需要多端测试。
• 当允许失焦时（如点击Done），必须移除浏览器的事件监听，避免影响后续的正常交互。

内容的提问来源于stack exchange，提问作者Gopika Singh