HarmonyOS 鸿蒙Next中如何实现悬浮按钮效果

HarmonyOS 鸿蒙Next中如何实现悬浮按钮效果 如何实现悬浮按钮效果？

6 回复

【解决方案】

参照目前的API参考，不推荐使用画中画实现悬浮按钮。画中画（PiP）主要面向视频播放、会议等持续性媒体场景，窗口内容需保持可见媒体元素。系统默认不提供透明背景配置接口，强行设置可能导致控件无法响应交互。试一试子窗口+悬浮窗权限。

在module.json5中配置权限。

"requestPermissions": [
    {
      "name": "ohos.permission.SYSTEM_FLOAT_WINDOW"
    }
],

创建子窗口并设置悬浮属性，通过@Window装饰器管理窗口内容。

let windowClass = new window.Window(this.context)
windowClass.create("floatingWindow", {
  width: 80,
  height: 80,
  windowType: window.WindowType.TYPE_FLOAT,
  posX: 300,
  posY: 600
})

更多关于HarmonyOS 鸿蒙Next中如何实现悬浮按钮效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


使用Stack：

Stack({ alignContent: Alignment.BottomEnd }) {    //悬浮按钮设置在右下角
  Column() {
    //主体内容
  }
  .width('100%')
  .height('100%')
  .backgroundColor($r('app.color.page_background'))

  // 顶部悬浮按钮
  this.TopButton()
}
.width('100%')
.height('100%')

//顶部悬浮按钮
@Builder
TopButton() {
  Button() {
    Text('↑')
      .fontSize(28)
      .fontWeight(FontWeight.Bold)
      .fontColor(Color.White)
  }
  .width(48)
  .height(48)
}

是需要这种效果吗

cke_4197.png

ohpm install @hw-agconnect/ui-fab;

 UIFab({
     fabPosition: { x: 16, y: 16 },
     fabColor: Color.Blue,
     darkIcon: false,
     clickChange: TypeClick.NONE,
     content: [
       {
         id: '1',
         iconPath: $r('app.media.app_icon'),
         iconSelectedPath: $r('app.media.ic_add'),
         text: 'text1',
         popClick: () => {
           console.info('text1: success')
         }
       }
     ],
   })

库地址

https://developer.huawei.com/consumer/cn/market/prod-detail/0df9a6706a834803af87da9f26e65412/2adce9bbd4cb42d58a87e6add45594b3

在需要显示悬浮效果的组件上添加onHover事件。

onHover(event: (isHover: boolean, event: HoverEvent) => void): T

鼠标或手写笔进入或退出组件时，触发hover事件。

官方示例：

// xxx.ets
@Entry
@Component
struct HoverEventExample {
  @State hoverText: string = 'no hover';
  @State color: Color = Color.Blue;
  build() {
    Column({ space: 20 }) {
      Button(this.hoverText, { type: ButtonType.Capsule })
        .width(180).height(80)
        .backgroundColor(this.color)
        .onHover((isHover: boolean, event: HoverEvent) => {
          // 通过onHover事件动态修改按钮在是否有鼠标或手写笔悬浮时的文本内容与背景颜色
          // 通过event.sourceTool区分设备是鼠标还是手写笔
          if (isHover) {
            if (event.sourceTool == SourceTool.Pen) {
              this.hoverText = 'pen hover';
              this.color = Color.Pink;
            } else if (event.sourceTool == SourceTool.MOUSE) {
              this.hoverText = 'mouse hover';
              this.color = Color.Red;
            }
          } else {
            this.hoverText = 'no hover';
            this.color = Color.Blue;
          }
        })
    }.padding({ top: 30 }).width('100%')
  }
}

在HarmonyOS Next中，可通过@ohos.window模块的Window类创建悬浮窗。使用window.create方法指定窗口类型为WindowType.TYPE_FLOATING，并设置窗口参数如宽高、位置。通过window.show显示窗口，内部使用ArkUI组件构建按钮界面。需在module.json5中申请ohos.permission.SYSTEM_FLOATING_WINDOW权限。具体实现涉及窗口管理、布局和事件绑定。

在HarmonyOS Next中实现悬浮按钮效果，可以通过以下步骤实现：

  1. 使用Panel组件
    Panel是鸿蒙提供的浮动面板组件，支持拖拽和悬浮特性。通过设置mode: PanelMode.Foldable可使其悬浮在界面顶层。

  2. 关键属性配置

    Panel({
  type: PanelType.Foldable,
  fullHeight: '60%',
  mode: PanelMode.Floating
}) {
  // 悬浮按钮内容
}
.onChange((width: number, height: number, mode: PanelMode) => {
  // 监听状态变化
})

  3. 结合绝对定位
    通过Position属性设置固定位置（如右下角）：

    .position({ x: '80%', y: '80%' })
.zIndex(999)

  4. 添加动效
    使用animateTo实现缩放/位移动画，增强交互反馈。

  5. 注意事项

    • 需申请ohos.permission.SYSTEM_FLOAT_WINDOW悬浮窗权限
    • 避免遮挡关键操作区域
    • 折叠态时建议显示简化图标

这种方案既符合鸿蒙设计规范，又能灵活适配不同场景的悬浮交互需求。

回到顶部