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

如果触摸外部,则颤动移除OverlayEntry

OverlayEntry是Flutter框架中的一个类,用于在屏幕上创建一个可覆盖其他组件的浮层。当我们需要在应用程序中创建一个悬浮窗口或者弹出框时,可以使用OverlayEntry来实现。

在Flutter中,我们可以通过GestureDetector来监听触摸事件。当用户触摸到OverlayEntry之外的区域时,我们可以通过监听触摸事件来实现颤动并移除OverlayEntry。

以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('OverlayEntry Example'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              // 触摸到OverlayEntry之外的区域时,颤动并移除OverlayEntry
              removeOverlayEntry();
            },
            child: Text(
              'Tap here to remove OverlayEntry',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}

OverlayEntry overlayEntry;

void showOverlayEntry(BuildContext context) {
  overlayEntry = OverlayEntry(
    builder: (BuildContext context) {
      return Positioned(
        top: 100,
        left: 100,
        child: Container(
          width: 200,
          height: 200,
          color: Colors.red,
          child: Center(
            child: Text(
              'OverlayEntry',
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
        ),
      );
    },
  );
  Overlay.of(context).insert(overlayEntry);
}

void removeOverlayEntry() {
  if (overlayEntry != null) {
    overlayEntry.remove();
    overlayEntry = null;
  }
}

在上述示例中,我们创建了一个简单的Flutter应用程序,当用户点击屏幕上的文本时,会触发removeOverlayEntry函数,该函数会移除之前创建的OverlayEntry。

这个示例中的OverlayEntry只是一个简单的红色矩形,实际上你可以根据自己的需求创建任何类型的浮层。在实际开发中,你可以使用OverlayEntry来实现各种弹出框、悬浮窗口等功能。

腾讯云相关产品和产品介绍链接地址:

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

相关·内容

【Flutter 专题】89 图解基本 Overlay 悬浮新手引导

Overlay 主要是通过 insert / insertAll 方式加入 OverEntry 浮层元素,通过 remove 移除浮层元素; insert One OverEnrty 如果仅需展示一个...insert Three OverEntrys 如果需要展示多个 OverEntry 浮层元素时,只能用 insertAll 添加到 Overlay 中,其中默认是以栈方式加入的;其中 insertAll...若需要逐次展示多个 OverlayEntry 可以在点击事件中单独加入新的 OverlayEntryoverlayEntry = OverlayEntry(builder: (context) {...Overlay 为全局覆盖,并非当前 Page,需要重新定义返回按键等;若没有 remove 返回上一个页面依然展示浮层元素;若 remove 其他未加入浮层的元素会返回失败; return WillPopScope...使用 insertAll 添加浮层元素时,不要同时加入多次同一个 OverlayEntry; overlayEntry = OverlayEntry(builder: (context) { return

3.1K41

一种更优雅的Flutter Dialog解决方案

| DateTime.now().difference(_lastPressedAt) > Duration(seconds: 1)) { //两次点击间隔超过1秒重新计时...获取触摸事件的作用,这个貌似靠谱,这里试了,可以和背景后面的页面互动!...但是又存在一个十分坑的问题 因为使用IgnorePointer屏蔽子控件的触摸事件,而IgnorePointer本身又不消耗触摸事件,会导致无法获取到背景的点击事件!...来解决该问题,提供了相关参数来分别控制,完美使Toast独立于其它的dialog弹窗 多增加一个OverlayEntry都会让内部逻辑和方法使用急剧复杂,维护也会变得不可预期,故额外只多提供一个OverlayEntry...;如果需要更多,可copy本库,自行定义,实现该库相关源码,都力求能让人看明白,相信大家copy使用时不会感到晦涩难懂 FlutterSmartDialog提供OverlayEntry和OverlayEntryExtra

3.5K41
  • 突破面试瓶颈!限时分享Android面试中事件分发的高级技巧

    事件拦截:在事件分发过程中,如果某个ViewGroup拦截了事件,该事件将不再向下传递给子View,而是由ViewGroup自己处理或分发给父View。...事件处理:当事件到达目标View时,该View会调用自身的事件处理方法(例如onTouchEvent)来处理事件,如果事件被处理,事件分发结束;如果事件未被处理,事件会向上返回,由父View继续处理...在事件处理中,如果需要识别复杂的手势操作,可以使用GestureDetector来实现;如果只需要处理简单的触摸事件,可以直接使用MotionEvent。...冲突处理规则: 对于外部滑动与内部滑动方向不一致产生的滑动冲突,通过判断滑动方向来决定哪个view进行拦截 对于外部滑动与内部滑动方向一致产生的滑动冲突,通过滑动到特殊的位置进行决定哪个view进行拦截...避免不必要的事件监听:及时移除不再需要的事件监听,避免产生无效的事件分发。 减少主线程耗时操作:避免在事件处理阶段进行耗时操作。

    15610

    大前端开发中的路由管理之五:Flutter篇

    它维护一个页面栈集合(List),实现页面栈到widget的转换过程,它同时也拥有一个私有类_Theatre来进行页面widget的绘制。...你有很多组件以一层层覆盖的模式绘制在界面上时,如果其中某一层的组件以全屏不透明的模式绘制在界面上,那它下层的组件就不需要再进行绘制了。...当某个包装页面的OverlayEntry的opaque属性为true时,表示占满全屏且不透明,那么以它为分界线,它之下的所有页面都不需要绘制了(因为被挡住了看不见)。...如果OverlayEntry的maintainState属性也为true,被分到舞台下的观众那一组,否则,没有进入剧院的资格。...在刷新路由栈的时候push状态的路由也会插入两个新的OverlayEntry,并在所有操作完成后触发Overlay更新。下图是push前后各widget中的栈的变化。

    2.2K30

    FL Studio水果20.9支持升级中文版

    其次提供了音效编辑器,音效编辑器可以编辑出各类声音针对在不同音乐中所要求的音效,例如,各类声音在特定音乐环境中所要展现出的高,低,长,短,延续,间断,颤动,爆发等特殊声效。...再次提供了方便快捷的音源输入,对于在音乐中所涉及的特殊乐器声音,只要通过简单外部录音后便可在FL Studio中方便调用,音源的方便采集和简单的调用造就了 FL Studio强悍的编辑功能。...完全重新设计混音器、动态缩放、具有 6 种布局风格、外加 3个用户自定义面板管理音轨、多推子选择和调整、混音器的音轨群组、多点触摸支持、每个音轨10个效果插槽。...多点触摸支持。每个音轨10个效果插槽。

    92800

    WPF 在触摸线程等待主线程窗口关闭会让主线程和触摸线程相互等待 原理方法一方法二

    如果遇到这个问题,属于暂时没有方法解决,只能规避。...Penimc.UnsafeNativeMethods.GetPenEvent(/*等待 _pimcResetHandle 释放,或用户触摸*/)) { // 如果是 _pimcResetHandle...在主线程需要等待触摸线程运行移除 PenContext 代码,触摸线程需要等待主线程关闭窗口,这时两个线程就无响应 所有的代码在 github 方法二 在触摸触发的过程中,出现了窗口的关闭,会让主线程卡住...和方法一不同的是,方法一会让触摸线程和主线程同时卡住,方法二只会让主线程卡住 从原理上可以知道,窗口关闭需要移除 PenContext 需要在触摸线程的第一层循环运行。...被释放,跳出第二层循环 break; } FireEvent(/*触发触摸消息*/); // 当前触摸线程运行到这里 } } } 在没有出现触摸的时候

    1.2K30

    微软发布windows 8 Logo认证硬件规范

    更新显卡驱动无需重启 平板以及可转换电脑1必须具有规定的五个物理按键2 触摸模块从通电到正常工作,延时必须小于0.1s 移动触摸设备必须有足够的边框以避免误触摸 设备具有加速度计并用以控制屏幕旋转时,动作时间小于...0.3s 必须有且仅有一个LED指示当前无线状态3 设备转码速度必须高于1倍速4 设备所有显示器及显卡必须支持D3D 10 如果具有蓝牙设备,必须支持蓝牙4.0+LE 至少10G硬盘空间供安装系统 如果具有触摸设备...,至少支持5点触摸 1.可转换电脑指具有可拆卸输入设备的平板,在移除外部附件后,仅能使用屏幕输入的设备 2.分别是:电源键,旋转锁定,音量增减,Windows键 3.所有无线设备(例如WIFI 3G 蓝牙

    34810

    1 分钟学 6 个常见的 DOM 基础操作(二)

    1、判断浏览器是否支持触摸事件(touch events) 判断当前浏览器是否支持 touch events,示例代码如下: const touchSupported = 'ontouchstart'...如果使用 false 将拷贝DOM元素的节点,并不会复制其属性和值。...The event handler }; ele.addEventListener('event-name', handler, { once: true }); 小贴士: IE不支持此属性 5.2 移除元素指定的事件...有时我们需要监测是不是在指定的元素的外部点击,比如弹出层,我们在弹出层的外部空白处点击,用于关闭弹出层,就需要监测外部点击的判断。...ele.contains(evt.target); // `isClickedOutside` 返回 true 表示点击事件发生在指定元素的外部 }); 总结 由于时间原因,今天分享的 DOM

    59120

    如何实现一个丝滑的点击水波效果

    _ripple as RippleOptions // 先移除上一个水波 _ripple.removeRipple() // 如果禁用或者上一个水波任务还未执行返回 if (_ripple.disabled..._ripple.touchmoveForbid) { return } // 如果在60ms内触摸移动了就会取消定时器,自然水波效果就不会有了 _ripple.tasker && window.clearTimeout...到这里,当我们手触摸元素时,水波效果就创建完成了,接下来是移除操作,看一下removeRipple方法: const ANIMATION_DURATION = 250 function removeRipple...如果在60ms内松开手指又立即再次触摸元素,那么又会执行createRipple方法,同样又会先执行removeRipple方法,此时前一个创建水波的task任务还未执行,_ripple.tasker存在...如果在60ms后再次触摸元素,执行removeRipple时_ripple.tasker不存在,会立即执行task方法,同样,这个task任务也会和松开手指触发的task任务重复。

    59120

    车床震颤的原因及排除

    如果您的刀具过度磨损,切削产生的切削力将会增加。这些增加的切削力会导致切削过程中出现颤动。 检查您的刀具并在必要时更换它。 随着时间的推移,刀具出现磨损是正常现象。...如果拧紧支架两侧的螺钉,杆可能不会与孔接触,从而有效地浮动在支架的中心 。 如果您在一侧使用两个螺钉仍然存在颤振问题,您可以松开其中一个固定螺钉来更改杆的共振频率。...测试运行您的应用程序并使用主轴速度和进给倍率来找到不会颤动的速度/进给组合。 刀具不在主轴中心线上 如果刀具的切削刃不在主轴中心线上,过大的切削力可能会导致颤振、精度和刀具寿命问题。...对工件支撑不足 如果工件没有得到适当的支撑,它将开始振动并在切口中引入颤动。 一般来说,如果工件延伸超过卡盘的部分直径与长度之比超过 3:1,请使用尾座来稳定切削。...主轴应能自由转动,如果感觉到迟滞或粗糙,表明轴承磨损。 注意:尾座压力过大可能会过早磨损您的活动中心。

    89110

    UIGestureRecognizer  手势识别一、概念介绍二、UIView 的分类三、UIGestureRecognizer 抽象类四、UIGestureRecognizerDelegate 代理

    如果设置为YES,手势识别器在识别的过程中(注意是识别过程),不会将触摸发给触摸到的控件,即控件不会有任何触摸事件。...@property(nonatomic) BOOL delaysTouchesBegan; 6、如果触摸识别失败是否立即结束本次手势识别的触摸事件(让触摸控件去识别触摸事件) 默认为YES,这种情况下发生一个触摸时...,在手势识别成功后,发送给touchesCancelled消息给触摸控件view,手势识别失败时,会延迟大概0.15ms,期间没有接收到别的触摸才会发送touchesEnded触摸结束方法,如果设置为NO...,返回NO则不再进行手势识别,方法触发等 此方法在window对象在有触摸事件发生时,调用gesture recognizer的touchesBegan:withEvent:方法之前调用,如果返回NO...,gesture recognizer不会看到此触摸事件。

    3K81
    领券