Flutter如何仅允许特定按键/鼠标按钮触发InteractiveViewer平移

推荐方案（Flutter 3.10+ 适用） #

Flutter 3.10及以上版本的InteractiveViewer原生提供allowedButtons参数，可直接指定允许触发交互的鼠标按键，无需额外自定义手势逻辑，代码如下：

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

// 组件使用示例
InteractiveViewer(
  // 仅响应鼠标中键触发的拖拽平移，自动屏蔽左键、右键拖拽的平移行为
  allowedButtons: const {kMiddleMouseButton},
  // 滚轮缩放不受该参数影响，不需要可设为false
  scaleEnabled: true,
  child: // 放置你的可交互子组件,
)

配置后组件默认的平移逻辑只会在鼠标中键按下拖拽时触发，右键、左键拖拽都不会触发平移，同时不影响按键的普通点击、滚轮缩放等其他交互。

低版本兼容方案（Flutter 3.10以下版本适用） #

如果使用的Flutter版本低于3.10，没有allowedButtons参数，可以通过关闭默认平移+手动监听中键拖拽更新变换状态的方式实现：

• 创建TransformationController实例控制InteractiveViewer的变换状态
• 关闭组件默认的pan平移能力，屏蔽默认任意按键触发平移的逻辑
• 在外层嵌套Listener监听鼠标事件，仅在中键按下时追踪拖拽偏移，手动更新变换矩阵实现平移

完整示例代码：

class MiddleKeyInteractiveViewer extends StatefulWidget {
  const MiddleKeyInteractiveViewer({super.key, required this.child});
  final Widget child;

  @override
  State<MiddleKeyInteractiveViewer> createState() => _MiddleKeyInteractiveViewerState();
}

class _MiddleKeyInteractiveViewerState extends State<MiddleKeyInteractiveViewer> {
  late final TransformationController _transformController;
  bool _middleKeyPressed = false;
  Offset _lastPointerPos = Offset.zero;

  @override
  void initState() {
    super.initState();
    _transformController = TransformationController();
  }

  @override
  void dispose() {
    _transformController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerDown: (event) {
        if (event.buttons == kMiddleMouseButton) {
          _middleKeyPressed = true;
          _lastPointerPos = event.position;
        }
      },
      onPointerMove: (event) {
        if (!_middleKeyPressed) return;
        final dragDelta = event.position - _lastPointerPos;
        _lastPointerPos = event.position;
        // 基于当前变换矩阵叠加平移偏移，不影响已有的缩放状态
        _transformController.value = _transformController.value.clone()
          ..translate(dragDelta.dx, dragDelta.dy);
      },
      onPointerUp: (_) => _middleKeyPressed = false,
      onPointerCancel: (_) => _middleKeyPressed = false,
      child: InteractiveViewer(
        transformationController: _transformController,
        panEnabled: false,
        scaleEnabled: true,
        child: widget.child,
      ),
    );
  }
}

注意：上述两种方案都不会拦截左键、右键的普通点击、右键菜单弹出等常规交互，仅屏蔽对应按键触发的组件平移行为。

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