HarmonyOS 如何实现window上全局UI？

Question

在APP中的窗口中实现UI是很常见的需求，例如全局的水印实现。

在HarmonyOS中如何实现在window上实现UI,有没有什么好的方法。

Answer 1

目前没有统一处理全局水印的方式，可以把水印样式定义成公共组件，可参考如下代码：

1、定义全局的水印组件

@Entry
@Component
export struct WaterMarkComponent {
  build() {
    Column({ space: 10 }) {
      Text(“TestMark”)
      .fontSize(50)
        .fontColor(Color.Gray)
    }
    .width(‘100%’)
    .height(‘100%’)
    .backgroundColor("#51aaaaaa")
      .justifyContent(FlexAlign.Center)
  }
}

@Builder
export function createWaterMark() {
  WaterMarkComponent()
    .hitTestBehavior(HitTestMode.None) // 必须设置其触摸测试为None或Transparent，否则正常组件无法响应事件
}

2、基于水印组件定义一个export的custombuilder，以供全局使用

@Builder
export function createWaterMark() {
  WaterMarkComponent()
    .hitTestBehavior(HitTestMode.None) // 必须设置其触摸测试为None或Transparent，否则正常组件无法响应事件
}

3.在需要加水印页面的根节点上添加.overlay属性，并使用上述的custombuilder

import { promptAction } from ‘@kit.ArkUI’
import { createWaterMark } from ‘…/components/watermark’;

@Entry
@Component
struct TestMarkDemo {
  build() {
    Row() {
      Column() {
        Text(“click”)
        .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => { // 测试对正常事件的响应
            promptAction.showToast({ message: “test” })
          })
      }
      .width(‘100%’)
    }
    .height(‘100%’)
    .overlay(createWaterMark())
  }
}