鸿蒙：设置浮层（OverlayManager）

1、前言

OverlayManager可用于页面叠加文本浮层（标注、提示）。

2、参考文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-create-overlaymanagerhttps://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-create-overlaymanager

3、核心思路

架构：

参数层（Params）：存浮层文本 / 位置；

UI 层（builderText）：按参数生成浮层视图；

业务层（Index01）：用 OverlayManager 管理，按钮触发创建，数组存浮层实例。

创建流程：① 获 OverlayManager 实例（绑定页面）；② 用 ComponentContent 封装上下文、UI、参数；③ 实例存入数组；④ 调用 addComponentContent () 添浮层渲染。

4、运行效果

5、完整代码

Index.ets

复制代码

// 导入HarmonyOS浮层管理核心类：ComponentContent用于封装浮层内容，OverlayManager用于浮层增删显隐操作
import { ComponentContent, OverlayManager, Position } from '@kit.ArkUI';

/**
 * 浮层参数类：存储单个浮层所需的动态数据
 * 用于向浮层UI构建器传递文本内容和显示位置
 */
class Params {
  // 浮层显示的文本内容
  text: string = "";
  // 浮层在屏幕上的偏移位置（x：水平坐标，y：垂直坐标）
  offset: Position;

  // 构造函数：初始化浮层文本和偏移位置
  constructor(text: string, offset: Position) {
    this.text = text;
    this.offset = offset;
  }
}

/**
 * 浮层UI构建器：用@Builder装饰器定义浮层的具体界面结构
 * 接收Params参数，动态渲染浮层内容和位置
 */
@Builder
function builderText(params: Params) {
  // 垂直布局容器：包裹浮层文本组件
  Column() {
    // 浮层核心文本组件：显示传递的文本内容
    Text(params.text)
      .fontSize(30)    // 设置文本字号为30
      .fontWeight(FontWeight.Bold) // 设置文本为粗体
  }
  .offset(params.offset) // 应用偏移位置，控制浮层在屏幕上的显示坐标
}

/**
 * 入口组件：Index01
 * 作为页面容器，提供按钮触发浮层添加，通过OverlayManager管理浮层
 */
@Entry
@Component
struct Index01 {
  // 浮层预设偏移数组：存储4个浮层的默认位置，避免重复定义
  // 每个元素对应一个浮层的(x,y)坐标，依次为"不错""呵呵""完美""OK"浮层的位置
  componentOffsetArray: Position[] = [{ x: 0, y: 30 }, { x: 10, y: 100 }, { x: 30, y: 220 }, { x: 50, y: 300 }];
  // 浮层文本前缀：所有浮层文本的公共开头部分
  message: string = "Hello World  ";
  // 浮层实例数组：存储所有已创建的ComponentContent实例，便于后续统一管理（如删除）
  componentContentArray: ComponentContent<Params>[] = [];
  // 浮层插入索引：控制新浮层在OverlayManager中的插入顺序（此处默认插入到最前面）
  componentContentIndex: number = 0;
  // OverlayManager实例：浮层管理核心对象，通过当前组件的UIContext获取，用于执行浮层增删操作
  overlayNode: OverlayManager = this.getUIContext().getOverlayManager();

  build() {
    // 栈布局容器：作为根布局，实现背景图与按钮组的层叠显示
    Stack() {
      // 背景图片：设置半透明背景图，宽高占满整个屏幕
      Image($r("app.media.very"))  // 引用应用资源中的图片（资源名：very）
        .width("100%")
        .height("100%")
        .opacity(0.5) // 设置图片透明度为0.5，避免遮挡按钮

      // 垂直布局容器：存放4个添加浮层的按钮，按钮间距30，宽高占满屏幕
      Column({ space: 30 }) {
        // 1. 添加"不错"浮层按钮
        Button("增加一个 不错")
          .onClick(() => {
            // 1.1 创建浮层内容实例：参数依次为"当前组件UI上下文""包装后的UI构建器""浮层参数"
            let componentContent = new ComponentContent(
              this.getUIContext(), // 关联当前组件的UI上下文，确保浮层与页面生命周期同步
              wrapBuilder<[Params]>(builderText), // 将@Builder包装为ComponentContent可接收的构建器
              new Params(this.message + "不错", this.componentOffsetArray[0])// 浮层参数：文本（前缀+"不错"）、偏移（第一个预设位置）
            );
            // 1.2 将浮层实例存入数组，便于后续管理
            this.componentContentArray.push(componentContent);
            // 1.3 通过OverlayManager添加浮层到页面，插入到指定索引位置
            this.overlayNode.addComponentContent(componentContent, this.componentContentIndex);
          })

        // 2. 添加"呵呵"浮层按钮：逻辑与"不错"按钮一致，仅浮层文本和偏移位置不同
        Button("增加一个 呵呵")
          .onClick(() => {
            let componentContent = new ComponentContent(
              this.getUIContext(),
              wrapBuilder<[Params]>(builderText),
              new Params(this.message + "呵呵", this.componentOffsetArray[1])// 偏移使用第二个预设位置
            );
            this.componentContentArray.push(componentContent);
            this.overlayNode.addComponentContent(componentContent, this.componentContentIndex);
          })

        // 3. 添加"完美"浮层按钮：偏移使用第三个预设位置
        Button("增加一个 完美")
          .onClick(() => {
            let componentContent = new ComponentContent(
              this.getUIContext(),
              wrapBuilder<[Params]>(builderText),
              new Params(this.message + "完美", this.componentOffsetArray[2])
            );
            this.componentContentArray.push(componentContent);
            this.overlayNode.addComponentContent(componentContent, this.componentContentIndex);
          })

        // 4. 添加"OK"浮层按钮：偏移使用第四个预设位置
        Button("增加一个 OK")
          .onClick(() => {
            let componentContent = new ComponentContent(
              this.getUIContext(),
              wrapBuilder<[Params]>(builderText),
              new Params(this.message + "OK", this.componentOffsetArray[3])
            );
            this.componentContentArray.push(componentContent);
            this.overlayNode.addComponentContent(componentContent, this.componentContentIndex);
          })
      }
      .width("100%")
      .height("100%")
    }
    .width("100%")
    .height("100%")
  }
}

觉得有帮助，可以点赞或收藏