时间戳

首页 > 解决方案 > 在 Flutter 中，如何检查是鼠标设备还是触摸设备？

flutter - 在 Flutter 中，如何检查是鼠标设备还是触摸设备？

问题描述

如何检查设备是触摸设备还是鼠标设备？

使用 kIsWeb 是不够的，因为如果在移动设备上使用应用程序的 Web 版本 kIsWeb 返回 true，但我需要它返回 false，因为它是触摸设备。

检查平台也不起作用，因为如果在 iOS 设备上使用应用程序的 Web 版本，例如对于 iOS 平台检查返回 false。

用例 - 我的应用程序有两种不同类型的视频播放器。一种适用于触摸设备（您点击以显示和隐藏控件），另一种适用于鼠标设备（当您将鼠标移入播放器时控件显示，当您鼠标移出时隐藏）。

Youtube 也有同样的想法。如果我在 iPhone 上使用 youtube 应用程序或网站，我会得到触控。如果我在 iPad Pro 上使用 youtube 应用程序或网站，我会获得触摸控制。如果我在我的 Mac 上使用 youtube 网站，我可以在所有屏幕尺寸（甚至是移动屏幕尺寸）上获得鼠标控制。

所以我想我真的只需要知道网络上的平台。如果不在网络上，我可以获得平台。

标签： flutterdart

解决方案

好问题@jwasher！我遇到了同样的问题——基于触摸和滑动的 UI，它非常适合作为原生移动应用程序，也非常适合作为移动 Web 浏览器上的单页 Web 应用程序 (SPA)，但是当 SPA 是基于鼠标的交互时，这很奇怪且笨拙在桌面网络浏览器中使用。

我确定的解决方案是将敏感小部件包装在 MouseRegion ( https://api.flutter.dev/flutter/widgets/MouseRegion-class.html ) 中，以在运行时检测鼠标活动，然后通过使用按钮增强 UI 做出反应提供一种以鼠标为中心的方式来触发以前仅与触摸触发器相关的动作。

您可以使用它来“启用鼠标”单个小部件，或者您可以将整个应用程序包装在 MouseRegion 中，在检测到活动时触发状态字段，然后以完全不同的方式为点击用户重建小部件树。

这种策略可能会在永远不会连接鼠标的设备（如智能手机）上产生一些较小的复杂性/CPU开销，但该解决方案将比构建或配置时间能力确定更灵活。如果用户在平板电脑上启动应用程序，然后将其放在支架上并连接蓝牙鼠标 - 它会做出适当的反应。

推荐阅读