flutter | 悬浮窗解决方案 flutter_floating
floating
Floating 是一个灵活且强大的悬浮窗解决方案
特性
- 全局的悬浮窗管理机制
- 支持各项回调监听,如移动、按下等
- 支持自定义是否保存悬浮窗的位置信息
- 支持单页面及全局使用,可插入 N 个悬浮窗
- 支持自定义禁止滑动区域,例如在 距离顶部 50 到底部的区域内滑动等
- 完善的日志系统,可查看不同悬浮窗对应的 Log
- 支持自定义位置方向及悬浮窗的各项指标
- 支持越界回弹,多指触摸移动,自适应屏幕旋转以及小窗口等情况
- 自适应悬浮窗大小
- …
打开方式
项目迁移至 flutter3.0,3.0 以下可能无法使用,请自行升级flutters SDK
flutter_floating: ^1.0.1
效果图
全局 | 小屏 | 缩放屏幕 |
---|---|---|
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DlVHkqFA-1666858961557)(https://cdn.jsdelivr.net/gh/LvKang-insist/PicGo/202202171737802.gif)] | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o5dHktUU-1666858961557)(https://cdn.jsdelivr.net/gh/LvKang-insist/PicGo/202202172155135.gif)] | |
旋转屏幕 | 多指滑动 | |
[外链图片转存中…(img-Bmnd0NKz-1666858961557)] |
可自由控制的日志查看
创建悬浮窗的时候通过 isShowLog
属性控制,不同的悬浮窗 Log 会通过不同 key 显示出来
I/flutter (24648): Floating_Log 1 : 按下 X:0.0 Y:150.0
I/flutter (24648): Floating_Log 1 : 抬起 X:0.0 Y:150.0
I/flutter (24648): Floating_Log 1 : 移动 X:0.36363636363636687 Y:150.0
I/flutter (24648): Floating_Log 1 : 移动 X:0.36363636363636687 Y:149.63636363636363
I/flutter (24648): Floating_Log 1 : 移动 X:0.7272727272727337 Y:149.63636363636363
I/flutter (24648): Floating_Log 1 : 移动 X:1.0909090909091006 Y:149.27272727272725
I/flutter (24648): Floating_Log 1 : 移动 X:1.4545454545454675 Y:149.27272727272725
I/flutter (24648): Floating_Log 1 : 移动 X:1.4545454545454675 Y:148.90909090909088
I/flutter (24648): Floating_Log 1 : 移动 X:0.0 Y:145.9999999999999
I/flutter (24648): Floating_Log 1 : 移动结束 X:0.0 Y:145.9999999999999
I/flutter (24648): Floating_Log 1645091422285 : 按下 X:342.72727272727275 Y:480.9090909090909
I/flutter (24648): Floating_Log 1645091422285 : 抬起 X:342.72727272727275 Y:480.9090909090909
I/flutter (24648): Floating_Log 1645091422285 : 移动 X:342.72727272727275 Y:480.5454545454545
I/flutter (24648): Floating_Log 1645091422285 : 移动 X:342.72727272727275 Y:480.18181818181813
I/flutter (24648): Floating_Log 1645091422285 : 移动 X:342.72727272727275 Y:479.81818181818176
I/flutter (24648): Floating_Log 1645091422285 : 移动 X:342.72727272727275 Y:479.4545454545454
I/flutter (24648): Floating_Log 1645091422285 : 移动 X:342.72727272727275 Y:479.090909090909
I/flutter (24648): Floating_Log 1645091422285 : 移动 X:342.72727272727275 Y:478.72727272727263
使用方式
可选参数
///[child]需要悬浮的 widget
///[slideType],可参考[FloatingSlideType]
///
///[top],[left],[left],[bottom] 对应 [slideType],
///例如设置[slideType]为[FloatingSlideType.onRightAndBottom],则需要传入[bottom]和[right]
///
///[isPosCache]启用之后当调用之后 [Floating.close] 重新调用 [Floating.open] 后会保持之前的位置
///[isSnapToEdge]是否自动吸附边缘,默认为 true ,请注意,移动默认是有透明动画的,如需要关闭透明度动画,
///请修改 [moveOpacity]为 1
///[slideTopHeight] 滑动边界控制,可滑动到顶部的距离
///[slideBottomHeight] 滑动边界控制,可滑动到底部的距离
Floating(Widget child, {FloatingSlideType slideType = FloatingSlideType.onRightAndBottom,double? top,double? left,double? right,double? bottom,double moveOpacity = 0.3,bool isPosCache = true,bool isShowLog = true,bool isSnapToEdge = true,this.slideTopHeight = 0,this.slideBottomHeight = 0,
})
全局悬浮窗
全局的悬浮窗通过 FloatingManager 进行管理
创建悬浮窗
floatingOne = floatingManager.createFloating("1",///keyFloating(const FloatingIncrement(),slideType: FloatingSlideType.onLeftAndTop,isShowLog: false,slideBottomHeight: 100));
通过 FloatingManager 获取 key 对应的悬浮窗
floatingManager.getFloating("1");
关闭 key 对应的悬浮窗
floatingManager.closeFloating("1");
关闭所有悬浮窗
floatingManager.closeAllFloating();
…
单悬浮窗创建
单悬浮窗可用于某个页面中,页面退出后关闭即可。
class CustomPage extends StatefulWidget {const CustomPage({Key? key}) : super(key: key);@override_CustomPageState createState() => _CustomPageState();
}class _CustomPageState extends State<CustomPage> {late Floating floating;@overridevoid initState() {super.initState();floating = Floating(const FloatingIncrement(),slideType: FloatingSlideType.onLeftAndTop,isShowLog: false,slideBottomHeight: 100);floating.open();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("功能页面"),),body: Container(),);}@overridevoid dispose() {floating.close();super.dispose();}
}
添加悬浮窗各项回调
var oneListener = FloatingListener()..openListener = () {print('显示1');}..closeListener = () {print('关闭1');}..downListener = (x, y) {print('按下1');}..upListener = (x, y) {print('抬起1');}..moveListener = (x, y) {print('移动 $x $y 1');}..moveEndListener = (x, y) {print('移动结束 $x $y 1');};
floatingOne.addFloatingListener(oneListener);
其他使用方式
- 使用方式
- 悬浮窗对应方法
- 全局悬浮窗管理对应方法
最后
如果您在使用过程中有任何问题可直接发送邮件lv345_y@163.com
或者直接提 Issues
flutter | 悬浮窗解决方案 flutter_floating相关推荐
- flutter 图解_Flutter自绘组件:微信悬浮窗(三)
前期指路: Flutter自绘组件:微信悬浮窗(一) Flutter自绘组件:微信悬浮窗(二) 上两讲中讲解了微信悬浮窗按钮形态的实现,在本章中讲解如何实现悬浮窗列表形态.废话不多说,先上效果对比图. ...
- flutter offset_Flutter自绘组件:微信悬浮窗(三)
前期指路: Flutter自绘组件:微信悬浮窗(一) Flutter自绘组件:微信悬浮窗(二) 上两讲中讲解了微信悬浮窗按钮形态的实现,在本章中讲解如何实现悬浮窗列表形态.废话不多说,先上效果对比图. ...
- 关于MIUI悬浮窗权限问题的解决方案
关于MIUI悬浮窗权限问题的解决方案 参考文章: (1)关于MIUI悬浮窗权限问题的解决方案 (2)https://www.cnblogs.com/fangyucun/p/4027750.html 备 ...
- Android M及以上版本系统 悬浮窗权限 的解决方案
Android M及以上版本系统 悬浮窗权限 的解决方案 Android的窗口体系中,WindowManager占有非常重要的地位,平时我们使用悬浮窗会遇到一些权限的问题. 当 Android工程在 ...
- Flutter 实现安卓原生系统级悬浮窗
Flutter实现安卓原生系统级悬浮窗 原创:@As.Kai 博客地址:https://blog.csdn.net/qq_42362997 如果以下内容对您有帮助,点赞点赞点赞~ 最近碰到了一个需求 ...
- 前端悬浮窗效果_Flutter自绘组件:微信悬浮窗(一)
看微信公众号的时候时常会想退出去回复消息,但又不想放弃已经阅读一半的文章,因为回复信息后再从公众号找到该篇文章之间有不必要的时间花费,微信悬浮窗的出现解决了这个烦恼,回复完消息之后只需要点击悬浮窗就可 ...
- Android 悬浮窗功能的实现
前言 我们大多数在两种情况下可以看到悬浮窗,一个是视频通话时的悬浮窗,另一个是360卫士的悬浮球,实现此功能的方式比较多,这里以视频通话悬浮窗中的需求为例.编码实现使用Kotlin.Java版本留言邮 ...
- Android12(S)授权弹窗被悬浮窗遮挡导致无法点击问题分析
概述 在测试过程中发现,部分情况下当应用请求权限时,权限授予弹窗中的选项无法点击,有时候又可以.点击其他区域发现是可以正常响应,获取按键事件,发现触摸是有正常上报事件的,所以可以排除是触摸失灵导致. ...
- 安卓股票悬浮窗_Android 实现悬浮窗功能
前言 我们大多数在两种情况下可以看到悬浮窗,一个是视频通话时的悬浮窗,另一个是360卫士的悬浮球,实现此功能的方式比较多,这里以视频通话悬浮窗中的需求为例.编码实现使用Kotlin.Java版本留言邮 ...
- Android Demo : 悬浮窗
Android Demo : 悬浮窗 搬砖自:简书 链接:https://www.jianshu.com/p/ac63c57d2555 设计思路分析 本Demo的设计思路如下: 一个MainActiv ...
最新文章
- C# 驱动连接 MongoDB ReplSet
- “无中生有”计算机视觉探奇
- r语言mfrow全程_R语言中的色彩_LearningR - SegmentFault 思否
- c语言编程计算人口增长模式转变示意图,读“人口增长模式及其转变示意图”,回答下列问题。(5分)(1)图中字母代表的人口增长模式是:A____________、B____...
- python字典程序题_急!一道关于python字典的编程题!求思路!
- java当中的定时器的4种使用方式
- VirtualBox中,LINUX与Windows可以通过链接来跳转
- 计算机网络——数据链路层
- php插桩 xdebug,[原创]AFL编译插桩部分源码分析
- Android Studio应用Freeline光速编译APK
- # 杂谈偶感 × 基于QFD方法的质量屋构建
- 怎么优雅的介绍自己的项目?
- 老婆学计算机视频,教老婆学电脑-5.14
- 程序员节你们公司都有什么活动
- model.named_parameters()与model.parameters()
- 【JavaSE基础】00-计算机基础及环境搭建
- 重读《大数据时代》:关于大数据的再认识
- 攻防世界Reverse进阶区-EasyRE-writeup
- 帆软内SQL语句的使用
- 《笔记——机器学习与物理模型》by鄂维南院士讲座
热门文章
- bochs在安卓上模拟kali linux系统
- puts()函数详解
- 移动应用跨平台框架江湖将现终结者?速来参拜来自Facebook的React Native
- 7.用户登陆,用户退出,记住用户名和密码
- EditText修改软键盘输入法的Enter键的按钮文字
- vue中添加mp3音频文件
- 损失函数大全Cross Entropy Loss/Weighted Loss/Focal Loss/Dice Soft Loss/Soft IoU Loss
- 企业微信需不需要养号
- MATLAB 解数独
- element-ui el-table 表格疯狂抖动