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

如何在触摸浮动按钮时停止flutter_ WebView的WebView的触摸响应

在Flutter中停止WebView的触摸响应,可以通过以下步骤实现:

  1. 导入所需的包:
代码语言:txt
复制
import 'package:flutter/gestures.dart';
  1. 创建一个自定义的WebView Widget,并继承自flutter_webview插件提供的WebView Widget:
代码语言:txt
复制
import 'package:flutter_webview/flutter_webview.dart';

class CustomWebView extends WebView {
  CustomWebView({
    Key key,
    initialUrl,
    ...
  }) : super(
          key: key,
          initialUrl: initialUrl,
          ...
        );
}
  1. 在CustomWebView中重写createHitTestable方法,返回一个自定义的GestureRecognizer:
代码语言:txt
复制
class CustomWebView extends WebView {
  ...
  
  @override
  createHitTestable() {
    return CustomWebViewGestureRecognizer();
  }
}
  1. 创建一个自定义的GestureRecognizer,并继承自OneSequenceGestureRecognizer:
代码语言:txt
复制
class CustomWebViewGestureRecognizer extends OneSequenceGestureRecognizer {
  @override
  void addAllowedPointer(PointerEvent event) {
    // 在此处判断是否触摸到了浮动按钮,如果是,则不允许继续传递事件给WebView
    // 可以通过判断触摸点的位置和浮动按钮的位置关系来实现
    if (isTouchingFloatingButton(event.position)) {
      stopTrackingPointer(event.pointer);
    } else {
      super.addAllowedPointer(event);
    }
  }

  @override
  void handleEvent(PointerEvent event) {
    // 不处理任何事件
  }

  @override
  String get debugDescription => 'CustomWebViewGestureRecognizer';
}
  1. 在使用WebView的地方,替换为CustomWebView:
代码语言:txt
复制
CustomWebView(
  initialUrl: 'https://example.com',
  ...
)

通过以上步骤,当触摸到浮动按钮时,WebView将不再响应触摸事件,从而实现停止WebView的触摸响应。

注意:以上代码仅为示例,实际使用时需要根据具体情况进行适当的修改和调整。

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

相关·内容

Mac高效-自定义悬浮菜单

下面介绍如何解决快速切换应用的难点: 设置自定义操作菜单栏 上一篇介绍了两种解决办法 为特定应用定义快捷键 这种方式的缺点是需要自己记住每个应用的快捷键,操作时必须是快捷键触发,如果是单手操作电脑就比较不方便...一键启动下班流程: 下班不想关应用,这样第二天上班时前一天的工作现场得以保存,能更快的进入工作状态,但是时间久了电脑会负荷重,你不得不关机重启一下,这时候你的工作现场因此被破坏,怎样解决这个问题呢?...这里主要使用BTT强大的触摸板手势,再配合显示浮动WebView的操作实现单手方便快捷的切换应用和其它任何你想要操作 任何地方快速唤起菜单栏 这里设置了双击触摸板唤起菜单栏,还定义了一个快捷键唤起菜单栏...,具体的菜单栏就是一个HTML文件: 实现每个菜单栏选项的action 这里我大概分为了三类,第一类是直接打开应用,相对简单;第二类是通过脚本触发KM的宏;第三类是触发另外一个浮动WebView...;下面简单介绍一下 1、 直接打开应用 这里选择的是其他触发,红框部分就是对应的命名触发 2、 脚本触发KM宏 3、触发另外一个浮动WebView 这里主要是显示日历窗口,当然你也可以做其他的显示

2K20
  • WPF 使用 Edge 浏览器

    ; } 优点 触摸非常流畅 加载页面非常快 缩放页面几乎不使用CPU 对于很多图片的时候使用内存很小 可以使用 RenderTransform 修改显示,但不是所有的变换都可以使用...可以进行布局,如下图,使用Grid分开按钮 存在的问题 吃掉了 Touch 事件、MouseDown事件,也就是吃掉了所有用户输入 第一次加载无法覆盖控件大小,在修改窗口大小之后才可以...设置 IsEnable 无作用 设置 IsHitTestVisible 无作用,依然可以响应输入 默认没有设置 IsManipulationEnable ,但是可以响应手势 能够使用...snoop 在视觉树找到 WebView 但是没有看到 WebView 里面的元素 无法在 WebView 上面放控件 我尝试了下面的代码,虽然设计的界面可以看到按钮,但是运行界面没有按钮...Click="Button_OnClick"> 但是运行的时候就看不到按钮了,所以存在层级问题,这个问题是在08年就有大神说到的问题。

    1.7K10

    移动端app开发问题及理解

    元素滚动条被滚动时 移动端事件有 click 单击事件 类似于pc端click,移动端中,连续click触发有200ms-300ms的延迟 touch 触摸类事件 touchstart 手指触摸到屏幕触发...touchmove 手指在屏幕上移动触发 touchend 手指离开屏幕触发 touchcancel 可由系统进行的触发,比如手指触摸屏幕时,突然alert了,或者系统中其他打断了touch行为可触发...可以改用beforeClose事件 回调函数有两个参数,第一个判断点击的是确认按钮还是取消按钮。第二个感觉是可以关闭模态框 移动端消息推送 消息推送跟设备走还是跟人走?...的内核容器统称WebView。...我的理解WebView相当于一个中间层,h5和原生应用交互都是通过原生应用中的WebView,h5调用原生应用注入其中的原生对象的方法,原生应用调用h5暴露在该环境中的JavaScript对象的方法,

    3.8K10

    Android 12的行为变更和版本兼容思路

    换句话说,系统会阻止通过某些窗口的触摸,但有一些例外。 受影响的应用 此更改会影响选择让触摸通过其窗口(例如通过使用 FLAG_NOT_TOUCHABLE 标志)的应用。...当组合的不透明度小于或等于系统对触摸的最大遮盖不透明度时,系统认为一组系统警报窗口是足够透明的。...此外,用户可能已经使用通知的操作按钮与通知进行了交互,并且您的应用正在响应该用户操作来处理服务或广播接收器。...如果您的应用程序检测到违反StrictMode的行为,则可能要停止执行应用程序以保护潜在的敏感信息。...无法从服务或广播接收者创建Notification trampolines 当用户与通知交互时 ,某些应用程序会通过启动应用程序组件来响应通知点击,该组件最终会启动用户最终看到并与之交互的活动。

    4.6K10

    Native地图与Web融合技术的应用与实践

    但从打车业务角度来看,因为打车业务有很多功能入口需要漂浮在地图之上,如起终点卡片、用户中心入口等,这种漂浮功能在技术上并不容易实现,而且还要保证用户触摸动作在漂浮元素与地图上发生时,分别派发给各自的事件系统...我们期望的效果是: 点击H5元素时,点击事件会派发给H5 WebView容器处理。 点击地图区域时,点击事件会派发给Native地图组件处理。...手势消息分发给WebView层流程 主要为上图1-->2-->3-->4过程,如下: 用户触摸动作首先被手势分发层捕获,手势分发层判断用户点击到热区数据范围内,将消息分发到WebView H5层处理。...两端分别在启动App时设置三层内容,最上层是手势触摸事件接收层,中间是WebView层(背景设置透明),最下层是Native地图层(如腾讯地图SDK)。...用数组记录当前热区数据,当手势分发层有事件发生时,通过Touch事件获取手指位置信息,遍历热区数组判断手指位置是否与热区的矩形相交,如相交则将消息分发给WebView层,否则分发给Native层。

    1.4K10

    (你也不想那个啥也不懂的测试嘲笑你吧)H5开发过程中那些不要碰的CSS选择器

    在开发针对移动设备的H5页面时,开发者往往会遇到各种挑战,尤其是当内容需要在不同的Web浏览器和WebView中呈现时。...尽管它们提供了一种强大的方式来增加装饰性内容,但在某些WebView中可能存在兼容性问题,特别是在使用复杂的样式或动画时。...替代方法:尽可能使用更简单的属性选择器,如[attribute=value],或者通过JavaScript来动态查询和操作这些元素。 6....:hover 尽管:hover在桌面浏览器中非常有用,用于改变鼠标悬停在元素上时的样式,但在触摸设备上,特别是在WebView环境中,:hover可能会导致不可预测的行为。...考虑使用触摸事件处理器来改变元素的样式,或设计一个不需要:hover状态的UI。 在开发针对WebView的H5内容时,了解哪些CSS选择器可能引起兼容性问题是很重要的。

    15210

    【原理篇】WebView 实现嵌套滑动,丝滑般实现吸顶效果,完美兼容 X5 webview

    对于一个 ACTION_MOVE 动作 scrolling child 在滑动之前,会通过 NestedScrollingChildHelper 查找是否有响应的 scrolling parent,如果有的话...滑动结束之后,Scrolling child 会停止滑动,并通过 NestedScrollingChildHelper 通知相应的 Scrolling Parent 停止滑动。...因此我们直接 extends com.tencent.smtt.sdk.WebView,对触摸事件进行拦截,实际上是对 FrameLayout 进行拦截处理,而不是对里面的 WebView 进行拦截处理...解决方案 我们先来看一下 X5 webView 的 View Tree 结构,因为 X5 webView 代码是混淆的,我们想要通过代码直接看出他的 View Tree,是不太方便的。...当 X5 里面的 webview 进行滑动的时候,会调用相应的方法。

    1.2K10

    移动开发实用

    通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动 touchend 当手指离开屏幕时触发 touchcancel 系统停止跟踪触摸时候会触发。...200-300 ms的延迟响应 移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。...解决方案: fastclick可以解决在手机上点击事件的300ms延迟 zepto的touch模块,tap事件也是为了解决在click的延迟问题 触摸事件的响应顺序 1、ontouchstart...1/2,例如视觉稿40px的字体,使用样式的写法为20px .css{font-size:20px} 参考《高清显示屏原理及设计方案》 ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 ios用户点击一个链接.../a> 发短信,winphone系统无效 发短信 发短信给: 10086 模拟按钮hover效果 移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验

    6.5K30

    使用 Cordova 构建应用的流程

    当点击按钮时,它会被触发。在这个函数中,我们调用由插件API提供的 navigator.camera 全局对象。...插件 安卓插件开发指南 本节提供如何在 Android 平台上实现本地插件代码的详细信息。...具有长时间运行的请求、后台活动(如媒体播放、侦听器或内部状态)的插件应该实现 onReset ()方法。 它在 WebView 导航到新页面或刷新时执行,这会重新加载 JavaScript。...性能考虑 点击与触摸 最大和最简单的错误,你可以使用点击事件。 虽然这些"工作"在移动设备上还不错,但大多数设备都会延迟300毫秒,以区分触摸和触摸"保持"事件。...您还应该考虑这样一个事实,即非 webkit 浏览器不支持"触摸"事件,请参阅 canifuse。 为了解决这些限制,您可以签出各种类型的库,如 HandJS 和 Fastclick。

    4.3K11

    Material Design —悬浮响应式按钮(Buttons: Floating Action Button)

    悬浮响应式按钮 悬浮响应式按钮代表一个应用中最重要的操作。 悬浮响应式按钮用于促进操作。 就像在UI上方浮动的圆形icon一样,它会在聚焦时改变颜色,并在选择时上浮。...避免对次要和消极的操作使用浮动操作按钮,包括以下内容: ·存档或清空 ·不明确的行为 ·警告或错误 ·有限制的任务,如剪切文本 ·应该在工具栏中的控件,如音量控制或更改字体颜色 浮动操作按钮不包含应用栏...尝试最适合您的app和按钮所在屏幕的变换。 触发 悬浮响应式按钮可以简单地触发动作或在某处导航。 触摸波动的动画向外扩展导致UI变化。 工具栏 浮动动作按钮可以在按下时变换成工具栏。...如果您有两个选项 ,即您的浮动操作按钮只显示另一个选项,则选最重要的动作作为悬浮响应式按钮。 如果你有超过六个,用户可能难以触摸到最远的选择。 为用户提供最好,最明显,最少的选择,来减少决策疲劳。...如果app的特点是添加文件类型,浮动操作按钮可以在第一次触摸后转换为相关操作。 但是,如果显示的操作与按钮无关,请将操作放入溢出菜单。 ? 悬浮响应式按钮可以包含联系人列表。

    5.8K90

    解读Android 12首个开发者预览版

    相关API返回空值或占位符值,具体取决于应用程序的目标SDK版本: ➀ target = 12 ,返回 null ➁ target <12 ,返回 02:00:00:00:00:00 未被信任的触摸事件将被阻止...为了保护系统安全和更好的用户体验,Android 12将会阻止某些窗口的触摸。...上面应用名字显示和折叠按钮都是相同的、固定的,下面折叠和展开状态呈现的区域是可自定义的: 折叠和展开的样式: 折叠状态 展开状态 若APP中存在自定义Notification.Style,亦或是使用了...隐私/安全 WebView 中的SameSite cookie行为 Android的WebView组件基于Chromium来提高安全性和隐私性,去年,Chromium对第三方Cookie的处理方式进行了更改...组件需要添加 exported 配置 target=12时,使用的activity 、service或者广播有用到 intent filters ,则需声明 android:exported 属性。

    1.9K30

    Flutter 深入探索混合开发的技术演进

    其他页面的时候会被当前原生的 WebView 挡住;并且打开页面的动画时Appbar 和 WebView 难以保持一致,因为 Appbar 和 WebView 是出于两个动画体系和渲染体系。...触摸事件 默认情况下, PlatformViews 是没办法接收触摸事件,因为 AndroidView 其实是被渲染在 VirtualDisplay 中 ,而每当用户点击看到的 "AndroidView..." 时,其实他们就真正”点击的是正在渲染的 Flutter 纹理 ,用户产生的触摸事件是直接发送到 Flutter View 中,而不是他们实际点击的 AndroidView。...所以 AndroidView 使用 Flutter Framework 中检测用户的触摸是否在需要的特殊处理的区域内: 当触摸成功时会向 Android embedding 发送一条消息,其中包含 touch...这就变成有些本末倒置,触摸事件从原生-Flutter-原生,中间的转化导致某些信息被丢失,也导致了响应的延迟。

    1.1K20

    android WebView总结

    webview.getSettings().setJavaScriptEnabled(true); 触摸焦点起作用 requestFocus();...给WebView加入一个事件监听对象(WebViewClient)并重写当中的一些方法: shouldOverrideUrlLoading:对网页中超链接button的响应。...当按下某个连接时WebViewClient会调用这种方法,并传递參数:按下的url。比方当webview内嵌网页的某个数字被点击时,它会自己主动觉得这是一个电话请求。...告诉用户程序在等待网络响应。 通过这几个事件。我们能够非常轻松的控制程序操作,一边用着浏览器显示内容。一边监控着用户操作实现我们须要的各种显示方式。...同一时候能够防止用户产生误操作。 6) 假设用webview点链接看了非常多页以后。

    80620

    Android Compose 新闻App(六)导航动画、WebView、浮动按钮、底部导航

    Android Compose 新闻App(六)导航动画、WebView、浮动按钮、底部导航 前言 正文 一、导航动画 ① 添加依赖 ② 使用 二、WebView使用 ① 导航传递URL参数 ② 配置WebView...三、FloatingActionButton使用   浮动按钮在日常开发中,也是很常见的,下面在我们的EpidemicNewsListPage中添加一个浮动按钮。...因为页面使用了Scaffold,因此可以直接通过Scaffold去添加浮动按钮。...添加浮动按钮的同时,我把TopAppBar中多余的内容清除掉了,下面我们运行一下: 点击时弹出Toast,默认显示在页面的右下角。 那如果要改位置呢?...floatingActionButtonPosition = FabPosition.End 这里疫情详情页面已经是写完了,你会看到当前页面中有一个浮动按钮,那么这个按钮就是用来返回主页面的,App现在还没有主页面的

    4.9K20

    在微信小程序 webview 加载后会覆盖其他组件的问题

    这个板块的设计大致是这样的:底部有一个 webview 组件,用于加载我所分享的其他相关文章的链接;而底部则有一个可以弹出的功能栏,用于展示对应资源的链接信息,用户可以通过拖动功能栏来查看更多内容。...设计的效果图如下所示:看起来很简单对吧?但在实现过程中,我遇到了一些问题。当我将代码部署到小程序中时,功能栏没有按预期显示出来。原本应该在底部可拖动的功能栏消失了,造成了显示异常。...因此,在小程序的渲染过程中,底部的功能栏被 webview 组件覆盖住了,导致功能栏无法正常显示。...这样,底部的功能栏能够正常显示,同时也能够通过触摸事件来拖动面板,提供了良好的用户交互体验。...为了进一步优化,我打算重新定义导航栏,并在导航栏中加入更多的控制按钮来处理这些细节问题。此外,我还考虑过另一种方法:将公众号文章转换为富文本格式,并使用小程序的 rich-text 组件进行展示。

    28810

    Appium自动化测试框架

    Appium自动化测试框架 环境搭建 adb 构成和原理 连接 包名,界面名 文件传输 获取APP启动时间 获取手机日志 安装和卸载APP 进入到安卓手机内部的Linux系统命令行 启动和停止adb服务端...时使用可以重启服务器,先关闭再启动 adb start-server 停止adb服务端 adb kill-server ---- 查看命令帮助 adb --help ---- 其他命令 ---- Appium..."); ---- 键值事件 Android平台独有,向系统发送键值事件,不同的键值对应不同的功能,如: keyevent(4)表示手机的HOME按键 public void pressKey(AndroidKey...打开手机端的开发者选项 对于原生界面来说,都会被线条包裹起来 对于webview界面来说,中间一部分是一整个控件,并没有被线条包裹起来,则该页面为webview ---- 线上app开启webview...模块来开启APP的WebView debug模式。

    2.1K30

    touchesBegan 触摸事件

    一、概念介绍 1、在用户使用App过程中,会产生各种各样的事件,iOS中的事件可以分为3大类型: 1)触摸事件 2)加速计事件 3)远程操控事件 响应者对象UIResponder 在iOS...,通过forin循环来遍历NSSet中的每一个元素,当用户用一根手指触摸屏幕时,会创建一个与手指相关联的UITouch对象, 保存着跟本次手指触摸相关的信息,比如触摸的位置、时间、阶段, 当手指离开屏幕时...1、属性: 1)获取触摸产生时所处的窗口 @property(nonatomic,readonly,retain) UIWindow *window; 2)获取触摸产生时所处的视图 @property...【操作:按耳机线控中间按钮三下不要松开】 UIEventSubtypeRemoteControlBeginSeekingBackward = 106, //快退停止【操作:按耳机线控中间按钮三下到了快退的位置松开...= 108, //快进停止【操作:按耳机线控中间按钮两下到了快进的位置松开】 UIEventSubtypeRemoteControlEndSeekingForward = 109, (3)获取触摸产生或变化的时间戳

    83220
    领券