嵌入Flutter应用的React网页触摸失效问题求助

从React主页面入手（无需修改Flutter代码） #

• 强制回收页面焦点
  当用户触摸主页面区域时，手动让主页面的根元素获取焦点，中断Flutter iframe可能持有的触摸会话。示例代码：

  import { useRef } from 'react';
  
  function App() {
    const rootContainerRef = useRef(null);
  
    const handleMainAreaTouch = () => {
      // 强制让根容器获取焦点，回收触摸控制权
      rootContainerRef.current?.focus();
    };
  
    return (
      <div 
        ref={rootContainerRef} 
        tabIndex="-1" 
        onTouchStart={handleMainAreaTouch}
        style={{ width: '100%', height: '100vh' }}
      >
        {/* 你的页面内容 */}
        <iframe src="your-flutter-app-url" />
      </div>
    );
  }
  

  原理：Flutter Web应用会在触摸时持有触摸会话的焦点，手动让主页面元素获取焦点可以强制中断这个会话，恢复主页面的触摸响应。

• 监听iframe失焦事件并重置焦点
  给iframe添加blur事件监听，当用户离开iframe区域时，强制让主页面body获取焦点：

  import { useRef, useEffect } from 'react';
  
  function App() {
    const iframeRef = useRef(null);
  
    useEffect(() => {
      const iframe = iframeRef.current;
      const handleIframeBlur = () => {
        // 阻止滚动的同时让body获取焦点
        document.body.focus({ preventScroll: true });
      };
      iframe?.addEventListener('blur', handleIframeBlur);
      return () => iframe?.removeEventListener('blur', handleIframeBlur);
    }, []);
  
    return <iframe ref={iframeRef} src="your-flutter-app-url" />;
  }
  

• 调整iframe的触摸行为CSS属性
  给iframe添加touch-action: auto的CSS属性，覆盖Flutter Web默认的触摸行为限制：

  iframe {
    touch-action: auto !important;
  }
  

  Flutter Web默认会设置touch-action: none来接管所有触摸手势，这个设置会干扰主页面的触摸事件处理，强制重置为auto可以让浏览器恢复默认的触摸行为处理。

给Flutter开发者的排查建议 #

• 检查Flutter应用的根Widget是否使用了GestureDetector并设置了behavior: HitTestBehavior.opaque，这种设置会让Flutter完全捕获触摸事件，即使触摸结束后可能残留触摸上下文。建议改为HitTestBehavior.deferToChild或者移除该设置。
• 检查Flutter Web的触摸事件处理逻辑，是否在触摸结束时没有正确释放触摸资源，比如是否有未取消的手势识别器。可以尝试在Flutter应用的根Widget添加Listener，监听onPointerUp事件，主动触发一次焦点重置：

  import 'dart:html' as html;
  
  // 在根Widget的build方法里
  Listener(
    onPointerUp: (_) {
      // 主动让页面失去焦点，释放触摸控制权
      html.document.body?.blur();
    },
    child: YourRootWidget(),
  )
  

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