如何禁用Flutter Web中触摸板多指滑动返回导航手势？

可以实现这个需求，核心思路是在浏览器层面拦截多点触摸的默认事件，阻止其触发历史导航操作。以下是具体实现方案：

实现步骤 #

• 借助dart:html库操作浏览器全局事件（仅Web环境有效）
• 监听触摸开始和触摸移动事件，当检测到2个及以上触摸点时，阻止事件的默认行为

代码示例 #

import 'dart:html' as html;
import 'package:flutter/material.dart';

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // 拦截触摸开始事件
    html.window.addEventListener('touchstart', _handleTouchEvent);
    // 拦截触摸移动事件
    html.window.addEventListener('touchmove', _handleTouchEvent);
  }

  void _handleTouchEvent(html.Event event) {
    final touchEvent = event as html.TouchEvent;
    // 当触摸点数量≥2时，阻止浏览器默认行为
    if (touchEvent.touches.length >= 2) {
      event.preventDefault();
    }
  }

  @override
  void dispose() {
    // 组件销毁时移除事件监听，避免内存泄漏
    html.window.removeEventListener('touchstart', _handleTouchEvent);
    html.window.removeEventListener('touchmove', _handleTouchEvent);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter Web Demo')),
        body: const Center(child: Text('测试双指滑屏')),
      ),
    );
  }
}

补充说明 #

• 为避免非Web环境编译报错，可添加条件编译判断：

  import 'dart:io' show Platform;
  
  @override
  void initState() {
    super.initState();
    if (Platform.isWeb) {
      html.window.addEventListener('touchstart', _handleTouchEvent);
      html.window.addEventListener('touchmove', _handleTouchEvent);
    }
  }
  

• 原理说明：浏览器触发双指滑屏返回的前提是识别到有效的多点触摸事件，通过event.preventDefault()可阻止浏览器对该事件的默认处理逻辑，从而避免触发历史导航。Google Sheets正是通过类似的事件拦截方式实现了相同效果。

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