首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter:在触摸输入设备上使用悬停小部件不起作用

Flutter是一种跨平台的移动应用开发框架,由Google开发和维护。它使用Dart编程语言,可以同时为iOS和Android平台构建高性能、美观的应用程序。

悬停小部件(Hover Widget)是Flutter中的一个特性,它允许开发者在触摸输入设备上模拟鼠标悬停的效果。当用户将鼠标悬停在一个小部件上时,悬停小部件会触发相应的事件,开发者可以根据这些事件来改变小部件的外观或执行特定的操作。

然而,由于触摸输入设备和鼠标输入设备的工作原理不同,悬停小部件在触摸输入设备上可能无法正常工作。在Flutter中,触摸输入设备通常使用手指进行操作,而不是鼠标的悬停效果。因此,悬停小部件在触摸输入设备上可能不会触发悬停事件。

为了解决这个问题,开发者可以考虑使用其他交互方式来替代悬停小部件在触摸输入设备上的功能。例如,可以使用手势识别器(GestureDetector)来检测用户的手势操作,然后根据手势的类型来执行相应的操作。另外,也可以使用长按小部件(LongPressWidget)来模拟悬停效果,当用户长按一个小部件时,可以触发相应的事件。

总结起来,虽然悬停小部件在触摸输入设备上可能不起作用,但在Flutter中有其他替代方案可以实现类似的功能。开发者可以根据具体的需求和交互方式选择合适的解决方案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutte部件目录-Material Components 顶

实现Material Design指南的视觉,行为和运动丰富的小部件。 应用程序结构和导航 按钮 输入和选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录中的更多小部件。...一个凸起的按钮由一个矩形的材料悬停在界面上。 ? ? FloatingActionButton 浮动操作按钮是一个圆形图标按钮,它悬停在内容以提升应用程序中的主要操作。...FlatButton 平面按钮是材料组件部件打印的部分,通过填充颜色对触摸作出反应。 ? IconButton 图标按钮是一个打印材质小部件的图片,通过填充颜色(墨水)对触摸作出反应。 ?...输入和选择 TextField 触摸文本字段将放置光标并显示键盘。 TextField部件实现了这个组件。 ? Checkbox 复选框允许用户从一组中选择多个选项。...Switch小部件实现这个组件。 ? Slider 通过移动滑块,滑块可让用户从一系列值中进行选择。 ? Date & Time Pickers 日期选择器使用对话窗口移动设备上选择一个日期。

9.4K40

【老孟FlutterFlutter 2 新增的功能

处理完键盘事件后停止传播。鼠标输入端,现在可以立即开始使用高精度定点设备进行拖动,而不必等待处理触摸输入时所需的延迟。...这在移动设备很有意义,但是很少有台式机用户会想到用鼠标长按某个项目来移动它,因此此版本包括适用于鼠标或触摸输入的抓握手柄。平台惯用功能的另一项改进是更新的滚动条,该滚动条可以正确显示桌面形状因素。...此版本包括一个更新的Scrollbar小部件,该小部件桌面环境中非常有效 滚动条小部件已更新,以提供桌面上预期的交互功能,包括拖动拇指,单击轨道以上下滚动页面以及鼠标悬停在鼠标的任何部分时显示轨道的功能...:如何编写一个应用程序,适应本身以及多个不同尺寸(,中和大屏幕),不同的输入模式(触摸,键盘和鼠标)和不同的习惯用法(移动,网络和台式机)?...所谓“好”,是指它在屏幕,中屏幕和大屏幕看起来都不错,它利用了触摸,键盘和鼠标输入的优势,并且对于平台的惯用语言也很好用(例如,通过使用网络的链接和桌面上的菜单)。

7.8K20
  • 2022年Flutter真的会一统大前端吗?

    创建 iOS 和 Android 应用程序时,通常推荐使用 Flutter,因为使用它更加简单高效。正是由于 Flutter 的诸多优势,它在许多情况下都是移动应用程序的绝佳候选者。...当你的项目依赖于特定设备和平台的主要库时 如果您的项目需要 Wear OS 版本或 Smart TV 应用程序,您会遇到一些问题。你可以在技术为这些平台构建一个 Flutter 应用程序。...因为 Android TV 只读取远程控制输入,而 Flutter 使用触摸屏和鼠标移动,情况就是这样,孰轻孰重,自己考量。...硬件支持 不建议将 Flutter 用于通过蓝牙连接到硬件设备的应用程序。由于它本身不使用设备的蓝牙,因此会出现一些连接问题和性能问题。 Flutter for Web 它不是html。...创建 Flutter 应用程序时,您可以同时使用这两个小部件,但是当我们为 iOS 构建使用 Material 小部件时,该应用程序缺乏原生的外观和感觉。

    2.4K20

    你无法检测到触摸

    设备宽度媒体查询 ¶ 手机拥有屏幕,并且手机拥有触摸屏,所以屏幕等于触摸屏,这正确吗?...到目前为止我只 Windows 8 里看到这种情况,但从理论讲,它可以发生在任何操作系统。 一些 BlackBerry OS 的版本也已被知道触摸设备持久启用了触摸的接口。...如果你特希望触屏检测在这些设备不会过时,千万别假定在监测屏幕时只需做好空间布局就够了。 事件和交互 ¶ 所以你想要为你的幻灯效果和地图窗口部件设置滑动手势吗?这很酷。...悬停状态的处理 ¶ 当前的触摸屏并不能传输鼠标/光标悬浮状态, 所以,最好调整我们对于触摸屏的UI设计,以便在触摸能够继续使用。 当然,键盘也是不能悬停的。...关于布局,假设每个人都有触摸屏。鼠标用户们使用大的控件比触摸屏用户们使用控件更加容易。悬停状态也是一样的。 关于事件和交互,假设任何人可能有触摸屏。

    1.9K20

    Flutter完整开发实战详解(二十、 Android PlatformView 和键盘问题)

    如果强行以这种方式 Android 使用,最终将产生很多如 AndroidView 与 Flutter UI 不同步的问题。...2.1.1、解决方法 AndroidView 使用 Flutter Framework 中的点击测试逻辑来检测用户的触摸是否需要特殊处理的区域内。... Android Q 开始 InputMethodManager(IMM)改为每个 Window 自己实例化而不是全局单例。因此之前幼稚的“设置代理”的模式 Q 开始不起作用。...设置一个代理 View ,该 View 与 WebView 相同的线程侦听输入连接。...2.2.3、局限性 通常这个逻辑取决于 Android 的内部行为,并且可能会十分脆弱,比如: 1.12 版本下针对华为等设备出现的键盘输入异常等问题。

    13.4K20

    Flutter 中渲染3D 模型

    地址:https://pub.dev/packages/model_viewer 介绍 Flutter部件,用于glTF和GLB设计中提供交互式3D模型。...它显示了如何在flutter应用程序中使用model_viewer包来运行模型查看器。它以glTF和GLB格式显示3D模型,并通过鼠标,手触摸和自动旋转将其旋转360度。...(此外,USDZ型号iOS 12+。) 支持具有可配置自动播放设置的动画模型。 (可选)它支持将模型启动到AR查看器中。 可以选择以可配置的延迟自动旋转模型。 支持小部件的可配置背景色。...**iosSrc:**此参数用于USDZ模型的URL,该模型将通过AR Quick Look受支持的iOS 12+设备使用。...packages get 配置 AndroidManifest.xml (Android 9+ only) 要在Android 9+设备使用此小部件,应允许您的应用程序与进行HTTP关联http:/

    25.1K20

    Tina_Linux_图形系统_开发指南

    成功烧写固件后,机端使用MiniGUI,需要进行如下几步: 使用的是触摸屏,需要进行触摸屏校准。 配置MiniGUI.cfg文件。 2.3.1 触摸屏校准....,默认是/dev/fb0 export QT_QPA_EGLFS_DEPTH=32 //覆盖屏幕的颜色深度,默认值为 32 3.3 QT5鼠标触摸屏配置 Qt中使用鼠标,需要启动udev,将鼠标设备标记为输入设备...GIO是一个包括文件、设备、声音、输入输出流、网络编程和DBus通信的现代的易于使用的VFS应用程序编程接口。 cairo Cairo是一个支持复杂设备输出的2D图形库。...Wayland目前可以R18与R40运行,其他平台暂未测试,其中R40只能使用FBDEV 作为运行后端,R18可以使用DRM与FBDEV。...支持各种输入设备触摸屏、鼠标、键盘、编码器、按钮等。 支持多显示器。 独立于硬件,可与任何微控制器和显示器一起使用。 可扩展以使用少量内存(64 kB闪存、16 kB RAM)运行。

    13.3K10

    全志 Tina Linux 图形系统 框架介绍 最全介绍 MiniGUI、QT5、EFL、GTK+(WebkitGtk、Midori)、DirectFB、Wayland

    成功烧写固件后,机端使用MiniGUI,需要进行如下几步: 使用的是触摸屏,需要进行触摸屏校准。 配置MiniGUI.cfg文件。 2.3.1 触摸屏校准....,默认是/dev/fb0 export QT_QPA_EGLFS_DEPTH=32 //覆盖屏幕的颜色深度,默认值为 32 3.3 QT5鼠标触摸屏配置 Qt中使用鼠标,需要启动udev,将鼠标设备标记为输入设备...GIO是一个包括文件、设备、声音、输入输出流、网络编程和DBus通信的现代的易于使用的VFS应用程序编程接口。 cairo Cairo是一个支持复杂设备输出的2D图形库。...Wayland目前可以R18与R40运行,其他平台暂未测试,其中R40只能使用FBDEV 作为运行后端,R18可以使用DRM与FBDEV。...支持各种输入设备触摸屏、鼠标、键盘、编码器、按钮等。 支持多显示器。 独立于硬件,可与任何微控制器和显示器一起使用。 可扩展以使用少量内存(64 kB闪存、16 kB RAM)运行。

    16.6K10

    谷歌 Flutter 1.17 发布

    完全支持Metal的iOS设备Flutter现在默认情况下使用它,这使您的Flutter应用程序大多数时候运行得更快,平均将渲染速度提高了约50%(取决于您的工作量)。...测试OpenGL与金属的iOS应用程序框架渲染时间(越短的条越好) 对于不完全支持Metal的设备(A7处理器之前的版本或运行10之前的iOS版本的设备),Flutter会像过去一样使用OpenGL,从而为较旧的设备提供本地渲染速度...有关更多详细信息,请在Flutter Wiki查看iOS的Metal常见问题。 材质小部件:NavigationRail,DatePicker等 改进了Flutter中实施的材料设计系统。...国际化方面,Flutter团队一直研究一些影响三星键盘输入法的问题,这些问题影响了各种东亚语言的文本输入。...此选项将您的应用程序捆绑到实际未在您的设备安装的通用Android“包装器”中,这与正常的启动选项不同。此外,某些情况下它不起作用,例如,当您使用访问后台执行的插件时。

    3.5K10

    Flutter终将逆袭!1.2版本发布,或将统一江湖

    去年 MWC 大展发布首个 Beta 版后,Flutter 1.0 正式版于 2018 年 12 月召开的 Flutter Live 2018 正式发布。...现在,开发人员使用Material小部件时会有更大的灵活性。对于Cupertino小部件,他们增加了对iOS上浮动光标文本添加的支持。这可以通过用力按键盘或长按空格键来触发。...虽然 Flutter 一直专注于移动,但该团队最近也开始讨论使用该框架构建桌面应用程序。为此, 1.2 版本中引入了全新的键盘事件和鼠标悬停支持。...它们本地运行,包括小部件检查器,时间轴视图,源级调试器和日志记录视图。 其他的更新 Flutter 1.2还支持更广泛的动画缓动功能,这些功能的灵感受到Robert Penner工作的启发。...Flutter天生支持iOS风格的控件, 称为Cupertino, 这样我们可以一套设计, 一套code跑两个系统. 学习Flutter的过程会改变手机端app开发的思维.

    1.2K20

    vscode开发插件推荐第二节

    flutter开发VScode插件推荐 Image preview 这是一个非常酷的扩展,它在悬停和装订线时显示图像预览,当您处理大量图像时可以派上用场。...这有助于我们避免图像路径或名称方面犯任何错误。如果您将鼠标悬停在 path ,扩展名会提供指向项目结构及其维度中的文件的链接。...” 启动命令面板(默认情况下,Ctrl+Shift+P Windows ,⌘+Shift+P Mac )并键入Material Icons,选择Activate Icon Theme。...Awesome Flutter Snippets 是常用 Flutter 类和方法的集合。它通过消除与创建小部件相关的大部分样板代码来提高您的开发速度。...Bracket Pair Colorizer 2 我们经常迷失嵌套部件树和嵌套类的迷宫中,花费大量时间寻找括号对。此扩展使通过颜色编码更容易找到括号对。

    1.7K10

    教你给MacBook装上触摸

    我们的想法是,MacBook的内置网络摄像头前改装一个镜子,这样网络摄像头就会以锐角向下拍摄电脑屏幕。相机可以看到手指悬停触摸屏幕,这样我们就可以使用计算机视觉将视频输入转换为触摸事件。...这是我们的物料清单: 一个镜子 硬纸盘 门铰链 热熔胶 经过一番重复实验之后,我们决定使用刀和热胶枪几分钟内完成设计。 ? 这个是最后的成品: ?...手指和反射(轮廓)以绿色标出,边界框以红色显示,触摸点以红色显示。 映射和校准 处理输入的最后一步是将触摸/悬停点从网络摄像头坐标映射到屏幕的坐标。这两者是与单应性相关的。...我们通过校准,即找到用户触摸屏幕的特定点,得到单应矩阵。我们收集了相应的网络摄像头坐标的数据后,可以使用RANSAC准确地得到其单应性。...应用 在当前的原型中,我们将悬停触摸转换为鼠标事件,使现有应用程序可以随时随地启用触摸功能。 ? 如果我们编写自己的触控式应用程序,我们可以直接使用触摸数据,如悬停高度等信息。

    65110

    前端如何提高用户体验:增强可点击区域的大小

    举个例子,WCAG准则2.3.2中规定:网页不包含任何闪光超过3次/秒的内容。 用户应该能够使用台式机/笔记本电脑的键盘以及移动设备或平板电脑触摸屏来操作输入。...不要在移动设备屏幕上将按钮设置得太小,以免按下正确的按钮。 触摸目标的最小尺寸最好至少为44 x 44像素。...我把鼠标悬停在按钮,光标仍然是一个指针,这很好。不过,我也可以选择文本和悬停时,有一个文本光标!如果使用了正确的元素,就不会发生这种情况。 ?... HTML 中,可以使用for属性将标签与输入框绑定在一起。...这个想法是,伪元素属于其父元素,因此当我们创建具有特定宽度和高度的伪元素时,它将充当其父元素的单击/触摸/悬停区域。

    4.8K20

    Flutter3.0新特性全接触

    Cascading menus and support for the macOS system menu bar 你现在可以使用PlatformMenuBar部件macOS创建平台渲染的菜单栏,该部件支持插入平台专用的菜单...Full support for international text input on all desktop platforms 国际文本输入,包括使用文本输入法编辑器(IME)的语言,如中文、日文和韩文...Foldable phone support Flutter 3版本支持可折叠移动设备微软带头的合作中,新的功能和部件允许你可折叠设备创建动态和令人愉快的体验。...在这些设备Flutter应用程序可以刷新率达到120 hz的情况下进行渲染,而以前则限制60 hz。这使得滚动等快速动画中的体验更加顺畅。...Flutter 3提供了对Material 3的选择支持;这包括Material You功能,如动态颜色、更新的颜色系统和排版,对许多组件的更新,以及Android 12中引入的新视觉效果,如新的触摸波纹设计和拉伸过卷效果

    2.3K40

    CSS 下拉菜单与 focus

    hover 算是比较熟悉的了, PC 鼠标悬停于此时 :hover 伪类生效,比如 链接 的样式正是采用 :hover 实现鼠标经过时反馈,以提示用户这是可点击的。...移动端上稍微有些不同,毕竟所有控制——无论单击、长按抑或划动——都由接触开始,也没有鼠标的「悬停」逻辑,为了方便判定,移动端上若想激活 :hover 也是单击(触摸)。...导航栏之所以不直接显示而是放进下拉菜单,也是为了移动端等尺寸设备中显示得优雅一点,因此这个单击判定其实是优势。...不过还是有点问题,比如一台 iPad mini 这种中尺寸设备,竖屏 + 鼠标情况下,但凡鼠标掠过就会调出下拉菜单;或者即便是 PC,把窗口缩小也同样是掠过频繁调出下拉菜单……毕竟是为了尺寸设备设计的而其中并非全是触摸设备...首先,第一个坑——iOS Sasfari 浏览器中点击 与 button 的时候是不会有 :focus 状态的,倒是原本 PC 上表示悬停的 :hover 可以点击(触摸)后被激活。

    5.5K20

    革命性web前端框架Flutter详细介绍和学习路径

    全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。 ?...Flutter唯一要求系统提供的是canvas,以便定制的UI组件可以出现在设备的屏幕,以及访问事件(触摸,定时器等)和服务(位置、相机等)。这是Flutter可以做到跨平台而且高效的关键。...Android 自带了 Skia,所以 Flutter Android SDK要比 iOS SDK很多。...,据官方文档,Flutter可以支持的设备上达到120FPS,而ReactNative的文档,只提到了可以达到60FPS(RN是否支持120FPS未深入调研,文档 RN 可以通过优化 diff 的方法提升渲染效率...认识视图(Views) 布局与列表 状态管理 路由与导航 线程和异步UI 手势检测及触摸事件处理 主题和文字处理 表单输入与富文本 调用硬件、第三方服务以及平台交互、通知 Flutter

    3.8K40

    Flutter —快速开发的IDE快捷方式

    Flutter 初学者,那么您一定厌恶嵌套结构,代码中添加或删除一个小部件,或者找到一个小部件何处结束、何处开始是多么困难。...只需输入stless即可创建一个无状态小部件,如下所示: 或输入stful创建有状态的小部件: 如果您已经创建了一个无状态小部件并添加了许多子级,但是却意识到您最终将需要一个State怎么办?...使用Alt + Enter可以执行更多神奇的事情 Alt + Enter是用于Flutter中加快开发速度的魔杖。...您想填充一些内容,但担心会弄乱您的小部件结构。使用我们的魔术棒,您可以添加填充而不会弄乱任何东西: 只需需要填充的小部件按Alt + Enter,然后单击“add padding”即可。...它只是将小部件放在可用空间的中心。这在列或行内不起作用

    2.1K20

    Flutter 1.22 正式发布

    另外,您将要避免瀑布边缘区域使用手势检测器,因为这可能会导致意外触摸。 其次,动画在显示软件键盘时与Android 11同步。 ?...这个想法是要在导航和Flutter的其余部分之间统一模型,同时解决许多问题并添加功能。实际,这个例子几乎不涉及Navigator 2.0的内容。...要进行手动测试,最简单的方法是Android设备启动启用了状态恢复功能的Flutter应用,Android开发人员设置中启用“不要保留活动”,运行Flutter应用,将其置于后台,然后然后回到它。...我们已经Scrollable类中提供了支持,例如ListView和SingleChildScrollView(记住用户的滚动位置)和TextField(恢复他们输入的文本),并且我们计划将其扩展到其他小部件...有关“网络”选项卡的文档,请参阅flutter.dev使用网络视图。

    7.5K20
    领券