Flutter移动端外接物理鼠标实现无限连续移动控制PC方案问询

核心问题在于Listener/MouseRegion默认基于屏幕绝对坐标系，鼠标触达屏幕边界后就会停止触发位置更新。要实现类似PC的无限移动，你需要追踪鼠标的相对位移，而非依赖绝对位置，具体方案如下：

关键思路 #

1. 放弃依赖屏幕绝对位置的监听逻辑，改用PointerMoveEvent中的delta属性——这个值记录的是鼠标相对于上一帧的位移偏移，完全不受屏幕边界限制，只要物理鼠标在移动就会持续输出。
2. 自行维护一个虚拟鼠标位置变量，每次收到PointerMoveEvent时，将delta累加到这个变量上，以此得到不受屏幕限制的连续位置数据。
3. 将这个虚拟位置或直接将delta值发送到PC端，即可实现远程鼠标控制。

代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

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

class _MyAppState extends State<MyApp> {
  // 维护不受屏幕限制的虚拟鼠标位置
  Offset _virtualMousePos = Offset.zero;
  bool _leftBtnPressed = false;

  @override
  Widget build(BuildContext context) {
    // 全局监听所有指针事件
    return Listener(
      onPointerMove: (PointerMoveEvent event) {
        // 累加相对位移，更新虚拟位置
        setState(() {
          _virtualMousePos += event.delta;
        });
        // 此处可将_virtualMousePos或event.delta发送至PC端，实现远程控制
        print('当前虚拟鼠标位置: $_virtualMousePos');
      },
      onPointerDown: (PointerDownEvent event) {
        if (event.buttons == kPrimaryMouseButton) {
          setState(() => _leftBtnPressed = true);
          print('鼠标左键按下');
        }
      },
      onPointerUp: (PointerUpEvent event) {
        if (event.buttons == kPrimaryMouseButton) {
          setState(() => _leftBtnPressed = false);
          print('鼠标左键松开');
        }
      },
      // 监听滚轮事件（可选）
      onPointerScroll: (PointerScrollEvent event) {
        print('滚轮偏移: ${event.scrollDelta}');
      },
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: const Text('无限鼠标位移测试')),
          body: Stack(
            children: [
              // 可选：在UI上显示虚拟鼠标指针（用于测试）
              Positioned(
                left: _virtualMousePos.dx,
                top: _virtualMousePos.dy,
                child: Container(
                  width: 20,
                  height: 20,
                  decoration: const BoxDecoration(
                    color: Colors.black,
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                  ),
                  child: _leftBtnPressed
                      ? const Center(
                          child: Icon(Icons.check, color: Colors.white, size: 12),
                        )
                      : null,
                ),
              ),
              const Center(child: Text('移动鼠标查看控制台输出')),
            ],
          ),
        ),
      ),
    );
  }
}

注意事项 #

• 确保移动设备开启OTG功能，以识别连接的物理鼠标。
• 无需使用MouseRegion，它的onHover事件仅在鼠标处于组件可见区域内时触发，无法满足全局持续监听需求。
• 如果只需要控制PC鼠标移动，直接发送event.delta即可，PC端接收后模拟对应位移，无需传递完整虚拟位置。

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