如何在Flutter Web中将触摸事件监听器标记为passive？

核心结论 #

目前Flutter Web官方框架层没有开放直接将全局触摸/滚轮事件监听器标记为passive的通用API，框架默认使用非passive监听器是为了支撑preventDefault能力，实现复杂自定义手势（如滑动返回、拖动交互等）。

可行优化方案 #

• 如果你使用Flutter 3.10及以上版本，可以开启官方提供的滚动性能优化开关，在项目web/index.html的Flutter初始化逻辑前添加如下配置：

  window.flutterConfiguration = {
    useNonPassiveTouchGestures: false
  };
  

  该配置会让框架优先对全局滚动区域使用passive事件监听器，仅在有自定义手势绑定的组件区域自动降级为非passive模式，对长列表、大页面的滚动流畅度提升效果明显。注意：如果你的应用存在依赖事件拦截的自定义手势，需要给对应组件单独指定gestureRecognizers保证手势正常触发。
• 优化滚动组件的回调逻辑：避免在ListView、GridView等滚动组件的onScroll回调中执行重计算、状态更新等重负载操作，所有计算逻辑建议放到微任务或独立Isolate中处理，减少滚动过程中的主线程阻塞，也可以达到和passive监听器近似的优化效果。
• 完全自定义事件绑定：如果你的场景需要完全控制事件逻辑，可以通过dart:html直接调用浏览器API绑定passive监听器，绕过Flutter原生手势系统：

  import 'dart:html' as html;
  
  void bindPassiveListeners() {
    // 绑定passive滚轮事件
    html.window.addEventListener('wheel', (event) {
      // 自定义滚轮处理逻辑
    }, passive: true);
    // 绑定passive触摸事件
    html.window.addEventListener('touchstart', (event) {
      // 自定义触摸处理逻辑
    }, passive: true);
  }
  

  该方式绑定的事件不会和Flutter手势系统冲突，你可以自行控制是否阻止事件冒泡到Flutter层面。

内容的提问来源于stack exchange，提问作者ark-tik