【问题标题】:In Flutter, how can I check if a mouse device or a touch device?在 Flutter 中,如何检查是鼠标设备还是触摸设备?
【发布时间】:2020-08-09 14:57:30
【问题描述】:

如何判断设备是触控设备还是鼠标设备?

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

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

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

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

所以我想我真的只需要了解网络上的平台。如果不在网络上,我可以得到平台。

【问题讨论】:

    标签: flutter dart


    【解决方案1】:

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

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

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

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

    【讨论】:

      【解决方案2】:

      设备不是“鼠标设备”或“指针设备”。 Events 有一个输入类型——参见Pointer event.kind——但不是整个设备。笔记本电脑可以有触摸屏,平板电脑可以有手写笔或外接鼠标;在这些环境中运行的应用可以接收这两种类型的事件。

      如果不知道您要通过此分类完成什么,很难就如何完成它提出建议。例如,尝试根据对主要交互模式的猜测来设置 UI 样式,这与对鼠标事件的反应不同于对触摸事件的反应是完全不同的问题。

      【讨论】:

      • 我在我的问题中添加了一个用例。
      【解决方案3】:

      您可以使用来自dart:io 库的Platform Class

          if (Platform.isAndroid) {
            print('android');
          }
          if (Platform.isIOS) {
            print('ios');
          }
          if (Platform.isMacOS) {
            print('mac');
          }
          if (Platform.isWindows) {
            print('windows');
          }
      

      【讨论】:

      • 这在 Flutter Web 上不起作用,我无法确定它是鼠标还是触摸设备。
      • @jwasher 你可以使用pub.dev/packages/universal_platform 用于网络
      • 更不用说 Android 应用也可以在 Chrome OS 上运行,Chrome OS 大多是触控和鼠标设备
      【解决方案4】:

      你不能直接这样做,但你可以找出屏幕大小,这可以告诉你它是什么类型的设备。

      DeviceScreenType getDeviceType(BuildContext context) {
        double deviceWidth = MediaQuery.of(context).size.shortestSide;
      
        if (deviceWidth > 950) {
          return DeviceScreenType.Desktop;
        }
      
        if (deviceWidth > 600) {
          return DeviceScreenType.Tablet;
        }
      
        return DeviceScreenType.Mobile;
      }
      

      DeviceScreenType 只是我制作的自定义枚举。

      因此,如果返回 Desktop,则它是鼠标设备而不是触摸设备。

      【讨论】:

      • 这不起作用。我可以使我的 chrome 窗口小于 600 像素,但它仍然是一个鼠标设备。我的 iPad Pro 的最短边宽度大于 950 像素,但它仍然是一款触控设备。
      • 如果您查看@smorgan 的答案,如果我们不知道这是做什么用的,很难给您建议。我给出了一个基于屏幕尺寸的例子,smorgan 给出了它是否包含触摸屏的答案。
      • 我为我的用例添加了问题。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-04-30
      • 1970-01-01
      • 2016-08-31
      • 1970-01-01
      相关资源
      最近更新 更多