鸿蒙HarmonyOS 5.0开发实战：悬浮工具箱实现案例

卖不甜枣  论坛元老 | 2025-3-8 22:44:16 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1634|帖子 1634|积分 4902

 往期鸿蒙全套实战文章必看：（文中附带鸿蒙全栈学习资料）



  • 鸿蒙开发核心知识点，看这篇文章就够了
  • 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线
  • 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南
  • 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
悬浮工具箱

介绍

本示例介绍利用zIndex、gesture等接口实现悬浮工具箱结果
结果预览图



利用说明
1.点击悬浮球，工具栏动效睁开/关闭
2.拖拽悬浮球，悬浮球跟随手势滑动
3.长按悬浮球，禁用/启用悬浮球，不再响应/再次响应悬浮球自己的点击事件
4.点击屏幕，切换横竖屏，悬浮球根据位置等效切换
下载安装

1.模块oh-package.json5文件中引入依赖
  1. "dependencies": {
  2.   "@ohos-cases/toolbox": "har包地址"
  3. }
复制代码
2.ets文件import自界说视图实现Tab结果组件
  1. import { FloatingWindow } from '@ohos-cases/toolbox'
复制代码
快速利用

本节重要介绍了如何快速上手利用工具箱组件，包罗构建工具箱组件以及常见自界说参数的初始化。
1.构建工具箱组件
在代码符合的位置利用FloatingWindow组件并传入对应的参数，后续将分别介绍对应参数的初始化。
  1. /**
  2. * 构建工具箱
  3. *
  4. * content: 工具箱内容
  5. * floatBall: 悬浮球样式
  6. * toolBoxAttribute: 工具箱属性
  7. */
  8. FloatingWindow({
  9.   toolList: this.toolList,
  10.   floatBall: this.toolTouch,
  11.   clickListener: {
  12.     onAction: (event: GestureEvent) => {
  13.       animateTo({
  14.         duration: 200
  15.       }, () => {
  16.         this.animationAttribute.visible = this.animationAttribute.visible === Visibility.Visible ? Visibility.Hidden : Visibility.Visible;
  17.       })
  18.     }
  19.   },
  20.   longClickListener: {
  21.     onAction: (event: GestureEvent, isDisable: boolean) => {
  22.       this.animationAttribute.visible = Visibility.Hidden;
  23.     },
  24.     onActionEnd: (event: GestureEvent, isDisable: boolean) => {},
  25.     onActionCancel: (isDisable: boolean) => {}
  26.   }
  27. })
  28. .height("250px")
  29. .width("250px")
复制代码
2.工具项UI创建
构建一个工具项的UI结果，此中动效参数以及一些须要的静态参数通过ToolInterface接口传入。
  1. @Builder
  2. function tool($$: ToolInterface) {
  3.   Image(($$.params as ImgParams).imgRes)
  4.     .height(40)
  5.     .width(40)
  6.     .objectFit(ImageFit.Fill)
  7.     .visibility(($$.animation as VisibleAnimation).visible)
  8.     .onClick(() => {
  9.       promptAction.showToast({
  10.         message: '点击逻辑自行实现',
  11.         duration: 2000
  12.       })
  13.     })
  14. }
复制代码
3.动效属性预备
通过实现一个继承于CustomAnimation的类，在该类中集成一些必要动态厘革的属性参数，此中继承类必须用@Observed修饰。本例中重要集成了一个可见属性visible，通过visible改变工具项的显隐情况。
  1. @Observed
  2. export class VisibleAnimation extends CustomAnimation{
  3.   // 工具项可见属性
  4.   private visible_: Visibility;
  6.   constructor(visible: Visibility = Visibility.Hidden) {
  7.     super();
  8.     this.visible_ = visible;
  9.   }
  11.   get visible(): Visibility {
  12.     return this.visible_;
  13.   }
  15.   set visible(visible: Visibility) {
  16.     this.visible_ = visible;
  17.   }
  18. }
复制代码
4.工具项输入参数预备
预备工具项必要传入的须要参数。通过实现一个继承CustomParams的类，在该类中集成必要传入工具项的须要属性。本例中重要集成了图片资源属性imgRes，通过传入Image组件表现对应图片实现条件渲染。
  1. export class ImgParams extends CustomParams {
  2.   // 图片资源
  3.   private imgRes_: PixelMap | ResourceStr | DrawableDescriptor;
  5.   constructor(imgRes: PixelMap | ResourceStr | DrawableDescriptor) {
  6.     super();
  7.     this.imgRes_ = imgRes;
  8.   }
  10.   get imgRes(): PixelMap | ResourceStr | DrawableDescriptor {
  11.     return this.imgRes_;
  12.   }
  13. }
复制代码
5.构建一个工具项
新建一个CustomTool类，向此中传入三个参数——工具项UI、工具项相对于悬浮球的偏移以及属性集AttributeSet。
  1. this.toolList[0] = new CustomTool(wrapBuilder(tool), {x: 60, y: 40}, new AttributeSet(this.animationAttribute, new ImgParams($r("app.media.AI_circle_viewfinder"))));
复制代码
5.悬浮球初始化
本小节重要介绍了如何绘制悬浮球样式。本示例中重要实现了两个button嵌套来实现悬浮球样式的绘制，此中必要传入一个ToolTouchInterface参数，内部包含了悬浮球是否禁用的属性。
  1. @Builder
  2. toolTouch($$: ToolTouchInterface) {
  3.   Button(){
  4.     Button()
  5.       .height(CommonConstants.EIGHTY_PERCENT)
  6.       .width(CommonConstants.EIGHTY_PERCENT)
  7.       .backgroundColor($$.isDisable ? Color.Red : Color.Gray)
  8.       .opacity(0.5)
  9.   }
  10.   .height(CommonConstants.FULL_PERCENT)
  11.     .width(CommonConstants.FULL_PERCENT)
  12.     .backgroundColor($$.isDisable ? 0xFFA28F : 0xD3D3D3)
  13.     .opacity(0.5)
  14. }
复制代码
属性(接口)说明

FloatingWindow组件属性
属性类型释义默认值toolListCustomTool[]工具箱UI-floatBall() => void悬浮球UI-toolBoxAttributeToolBoxAttribute工具箱属性-thresholdnumber or string悬浮球开始吸边的间隔阈值（以手机宽度为基准）18%levelnumber悬浮球的堆叠优先级Number.MAX_VALUEclickListenerClickListener悬浮球点击事件监听器-longClickListenerLongClickListener悬浮球长按事件监听器-dragListenerDragListener悬浮球拖拽事件监听器- CustomTool类属性
属性类型释义默认值builderWrappedBuilder<[ToolInterface]>工具项UI-offsetOffset工具项相对于悬浮窗的偏移-attributeSetAttributeSet工具项属性集undefined Offset属性
属性类型释义默认值xnumber横坐标偏移-ynumber总坐标偏移- AttributeSet类属性
属性类型释义默认值animationCustomAnimation动效参数集（用于UI修改的参数）undefinedparamsCustomParams静态参数集（用于工具项须要的参数）undefined ClickListener属性
属性类型释义默认值onAction(event: GestureEvent) => void点击事件响应- LongClickListener属性
属性类型释义默认值onAction(event: GestureEvent, isDisable: boolean) => void长按开始回调-onActionEnd(event: GestureEvent, isDisable: boolean) => void长按结束回调-onActionCancel(isDisable: boolean) => void长按取消回调- DragListener属性
属性类型释义默认值onActionStart(event: GestureEvent) => void拖拽开始回调-onActionUpdate(event: GestureEvent) => void拖拽过程回调-onActionEnd(event: GestureEvent) => void拖拽结束回调- ToolTouchInterface属性
属性类型释义默认值isDisableboolean是否禁用工具箱- ToolInterface属性
属性类型释义默认值paramsCustomParams静态参数undefinedanimationCustomAnimation动效参数undefined 实现思路

本案例重要分为两部分内容：一部分是悬浮球手势交互实现；一部分是悬浮球横竖屏切换位置等效变更实现。
1.悬浮球手势交互

悬浮球手势交互重要分为3个部分：1.单击睁开/收回工具栏；2.长按启用/禁用工具栏；3.工具栏跟手滑动且具有吸边结果。对于三种差别的手势事件，本案例通过利用gesture接口以及GestureGroup集成三种差别的手势，并通过设置集成模式为GestureMode.Exclusive使手势之间互斥。
  1. Column() {
  2.   this.floatBall({ isDisable: this.isDisable });
  3. }
  4. .gesture(
  5.   GestureGroup(GestureMode.Exclusive,
  6.     ...
  7.   )
  8. )
复制代码
1.1 单击睁开/收回工具栏
单击睁开/收回工具栏重要是通过TapGesture手势事件实现，并在clickListener的响应事件中通过切换状态变量visible实现工具栏显隐切换。
  1. TapGesture()
  2.   .onAction((event: GestureEvent) => {
  3.     console.log(`TapGesture`)
  4.     this.clickListener.onAction(event);
  5.   })
  7. clickListener: {
  8.   onAction: (event: GestureEvent) => {
  9.     animateTo({
  10.       duration: 200
  11.     }, () => {
  12.       this.animationAttribute.visible = this.animationAttribute.visible === Visibility.Visible ? Visibility.Hidden : Visibility.Visible;
  13.     })
  14.   }
  15. }
复制代码
1.2 长按启用/禁用工具栏
长按启用/禁用工具栏重要是通过LongPressGesture手势事件实现，在响应事件时通过修改状态变量isDisable实现工具栏禁用/启用逻辑并实行对应的UI厘革逻辑。
  1. LongPressGesture()
  2.   .onAction((event: GestureEvent) => {
  3.     console.log(`LongPressGesture Start`)
  4.     // TODO: 工具箱禁用逻辑
  5.     this.isDisable = !this.isDisable;
  6.     vibrator.startVibration({
  7.       type: 'preset',
  8.       effectId: 'haptic.clock.timer',
  9.       count: 1,
  10.     }, {
  11.       id: 0,
  12.       usage: 'alarm'
  13.     }, (error: BusinessError) => {
  14.     })
  15.     this.longClickListener.onAction(event, this.isDisable);
  16.   })
  17.   .onActionEnd((event: GestureEvent) => {
  18.     console.log(`LongPressGesture End`);
  19.     this.longClickListener.onActionEnd(event, this.isDisable);
  20.   })
  21.   .onActionCancel(() => {
  22.     console.log(`LongPressGesture Cancel`)
  23.     this.longClickListener.onActionCancel(this.isDisable);
  24.   })
  26. longClickListener: {
  27.   onAction: (event: GestureEvent, isDisable: boolean) => {
  28.     this.animationAttribute.visible = Visibility.Hidden;
  29.   },
  30.   onActionEnd: (event: GestureEvent, isDisable: boolean) => {},
  31.   onActionCancel: (isDisable: boolean) => {}
  32. }
复制代码
1.3 工具栏跟手滑动且具有吸边结果
工具栏跟手滑动通过PanGesture手势实现，在事件响应的开始阶段，初始化偏移参数；然后，在事件响应阶段，通过求取当前偏移量与上一次偏移量之间的差值实现悬浮球的滑动；最终在事件响应结束阶段，通过计算悬浮球与屏幕边缘的间隔来实现悬浮球的吸附结果。
  1. PanGesture()
  2.   .onActionStart((event: GestureEvent) => {
  3.     this.offsetX_ = 0;
  4.     this.offsetY_ = 0;
  5.   })
  6.   .onActionUpdate((event: GestureEvent) => {
  7.     // 保证悬浮球保持在屏幕内
  8.     let curX = Math.max(this.offsetX! + event.offsetX - this.offsetX_, 0);
  9.     let curY = Math.max(this.offsetY! + event.offsetY - this.offsetY_, 0);
  10.     curX = Math.min(curX, this.screenW - this.cW);
  11.     curY = Math.min(curY, this.screenH - this.cH);
  12.     this.offsetX_ += curX - this.offsetX!;
  13.     this.offsetY_ += curY - this.offsetY!;
  14.     this.offsetX = curX;
  15.     this.offsetY = curY;
  16.   })
  17.   .onActionEnd((event: GestureEvent) => {
  18.     let left: number = this.offsetX!;
  19.     let leftMargin: number = left;
  20.     let rightMargin: number = this.screenW - leftMargin - this.cW;
  21.     // 更新工具栏展开方向
  22.     this.unfoldDirection = leftMargin <= rightMargin ? Direction.RIGHT : Direction.LEFT;
  23.     // 吸附效果实现
  24.     this.closeToBorder(left, left + this.cW, 0, this.screenW, this.realThreshold);
  25.   })
复制代码
2. 悬浮球横竖屏切换位置等效变更

本节重要介绍了如何实现横竖屏切换时悬浮球位置等效变更。为了能够判断是否发生了横竖屏切换，本案例重要通过onAreaChange接口来进行监听，这是因为屏幕发生横竖屏变更的时间，悬浮球位置必然会发生厘革。然后重要是实现悬浮球的位置等效变更，这一点重要是通过判断悬浮球与左右屏之间的间隔，来判断是利用左边距还是右边距实行百分比等效转换（上下边距转换也是一样）。
  1. Column() {
  2.   this.floatBall({disable: this.disable});
  3. }
  4. .onAreaChange((oldValue: Area, newValue: Area) => {
  5.   // console.log(`onAreaChange`)
  6.   this.cW = Number.parseFloat(newValue.width.toString());
  7.   this.cH = Number.parseFloat(newValue.height.toString());
  8.   let left: number = 0;
  9.   let right: number = 0;
  10.   if (this.offsetX === undefined || this.offsetY === undefined) {
  11.     this.offsetX =
  12.       newValue.globalPosition.x === undefined ? 0 : Number.parseFloat(newValue.globalPosition.x.toString());
  13.     this.offsetY =
  14.       newValue.globalPosition.y === undefined ? 0 : Number.parseFloat(newValue.globalPosition.y.toString());
  15.     left = this.offsetX;
  16.     right = this.screenW - left - this.cW;
  17.   } else if ((1 & display.getDefaultDisplaySync().orientation) !== this.screenOrientation) { // 横竖屏切换
  18.     this.screenOrientation ^= 1;
  19.     // console.log(`${this.offsetX}, ${this.offsetY}, ${this.screenW}, ${this.screenH}`)
  20.     left = this.offsetX;
  21.     right = this.screenW - left - this.cW;
  22.     let top: number = this.offsetY;
  23.     let bottom: number = this.screenH - top - this.cH;
  24.     this.unfoldDirection = left <= right ? Direction.RIGHT : Direction.LEFT;
  25.     // console.log(`onAreaChange: ${(left / this.screenW)}`)
  26.     // console.log(`onAreaChange, ${top / this.screenH}`)
  27.     let newScreenW = this.screenOrientation === 0 ? this.initialW : this.initialH;
  28.     let newScreenH = this.screenOrientation === 0 ? (this.initialH - this.avoidSysHeight - this.avoidNavHeight) : (this.initialW - this.avoidNavHeight);
  29.     // TODO: 知识点: 通过悬浮球与左右屏之间的大小比例，来判断是使用左边距百分比还是右边距百分比实现等效转换
  30.     this.offsetX = left <= right ? (left / this.screenW * newScreenW) : (newScreenW - (right / this.screenW) * newScreenW - this.cW);
  31.     // TODO: 知识点: 通过悬浮球与上下屏之间的大小比例，来判断是使用上边距百分比还是下边距百分比实现等效转换
  32.     this.offsetY = top <= bottom ? (top / this.screenH * newScreenH) : (newScreenH - (bottom / this.screenH) * newScreenH - this.cH);
  33.     this.screenH = newScreenH;
  34.     this.screenW = newScreenW;
  35.   }
  36.   this.unfoldDirection = left <= right ? Direction.RIGHT : Direction.LEFT;
  37.   // TODO: 百分比转换
  38.   this.threshold = this.threshold.toString();
  39.   if (this.threshold.includes("%")) {
  40.     this.adpThreshold = Number.parseFloat(this.threshold.replace("%", "")) / 100 * this.screenW;
  41.     return;
  42.   }
  43.   this.adpThreshold = Number.parseFloat(this.threshold.toString());
  44. })
复制代码
高性能知识点

无
工程布局&模块类型

  1. toolbox                                      // har类型
  2. |---common
  3. |   |---CommonConstants.ets                  // 内置常量定义
  4. |---model
  5. |   |---AttributeSet.est                     // 工具项属性集
  6. |   |---ChildTool.est                        // 工具项组件
  7. |   |---ClickListener.est                    // 悬浮球点击事件监听器
  8. |   |---CustomAnimation.est                  // 动效参数集
  9. |   |---CustomParams.est                     // 静态参数集
  10. |   |---CustomTool.est                       // 自定义工具项
  11. |   |---DragListener.est                     // 悬浮球拖拽事件监听器
  12. |   |---LongClickListener.est                // 悬浮球长按事件监听器
  13. |   |---Offset.ets                           // 偏移类
  14. |   |---ToolInterface.est                    // 工具项UI入参
  15. |   |---ToolTouchInterface.est               // 悬浮球UI入参
  16. |---pages
  17. |   |---ImgParams.ets                        // 自定义静态参数集
  18. |   |---LoadingHUD.ets                       // lottie动画
  19. |   |---ToolBoxView.ets                      // 工具箱页面
  20. |   |---VisiableAnimation.ets                // 自定义动效属性集
  21. |---utils
  22. |   |---FloatingWindow.ets                   // 工具箱组件
  23. |---FeatureComponent.ets                     // AppRouter入口文件
复制代码



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

卖不甜枣

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表