flutter | 悬浮窗解决方案 flutter_floating-阿里云开发者社区

flutter | 悬浮窗解决方案 flutter_floating

2023-01-19 628

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： flutter | 悬浮窗解决方案 flutter_floating

Floating 是一个灵活且强大的悬浮窗解决方案

特性

全局的悬浮窗管理机制

支持各项回调监听，如移动、按下等

支持自定义是否保存悬浮窗的位置信息

支持单页面及全局使用，可插入 N 个悬浮窗

支持自定义禁止滑动区域，例如在距离顶部 50 到底部的区域内滑动等

完善的日志系统，可查看不同悬浮窗对应的 Log

支持自定义位置方向及悬浮窗的各项指标

支持越界回弹，多指触摸移动，自适应屏幕旋转以及小窗口等情况

自适应悬浮窗大小

…

打开方式

项目迁移至 flutter3.0，3.0 以下可能无法使用，请自行升级flutters SDK

flutter_floating: ^1.0.1 
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",///key
        Floating(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;
  @override
  void initState() {
    super.initState();
    floating = Floating(const FloatingIncrement(),
        slideType: FloatingSlideType.onLeftAndTop,
        isShowLog: false,
        slideBottomHeight: 100);
    floating.open();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("功能页面"),
      ),
      body: Container(),
    );
  }
  @override
  void 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);