HarmonyOS鸿蒙Next中如何实现window上全局UI

HarmonyOS鸿蒙Next中如何实现window上全局UI 在APP中的窗口中实现UI是很常见的需求，例如全局的水印实现。 在鸿蒙中如何实现在window上实现UI,有没有什么好的方法。

3 回复

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

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())
}

更多关于HarmonyOS鸿蒙Next中如何实现window上全局UI的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，实现全局UI主要依赖于Window和WindowStage的概念。Window是鸿蒙系统中表示窗口的基本单元，而WindowStage则用于管理窗口的生命周期和状态。以下是如何在鸿蒙Next中实现全局UI的步骤：

  1. 创建WindowStage：首先，你需要创建一个WindowStage对象。WindowStage是窗口的载体，负责管理窗口的创建、显示和销毁等操作。

  2. 配置WindowStage：在创建WindowStage后，你可以通过设置其属性来配置窗口的显示方式，例如窗口的大小、位置、背景色等。

  3. 创建Window：在WindowStage中，你可以创建一个或多个Window对象。Window是UI内容的容器，所有的UI组件都将添加到Window中进行显示。

  4. 设置全局UI：在Window中，你可以通过添加Component组件来构建全局UI。鸿蒙系统提供了丰富的UI组件，如Text、Button、Image等，你可以根据需要选择合适的组件进行布局和设计。

  5. 显示WindowStage：最后，通过调用WindowStage的show()方法，将窗口显示在屏幕上。此时，全局UI将在整个窗口中呈现。

以下是一个简单的代码示例，展示如何在鸿蒙Next中实现全局UI：

import { WindowStage, Window, Component, Text } from '@ohos.window';

// 创建WindowStage
let windowStage = new WindowStage();

// 配置WindowStage
windowStage.setSize(800, 600);
windowStage.setBackgroundColor('#FFFFFF');

// 创建Window
let window = new Window();

// 创建UI组件
let text = new Text();
text.setText('Hello, HarmonyOS!');
text.setFontSize(24);
text.setTextColor('#000000');

// 将UI组件添加到Window中
window.addComponent(text);

// 将Window添加到WindowStage中
windowStage.addWindow(window);

// 显示WindowStage
windowStage.show();

通过上述步骤，你可以在鸿蒙Next中实现全局UI的显示。WindowStage和Window的灵活使用，使得全局UI的管理和布局变得更加简单和高效。

在HarmonyOS鸿蒙Next中，实现全局UI可以通过以下几种方式：

  1. 使用Ability和Page：创建Ability和Page来管理全局UI，通过Ability的生命周期方法控制UI的显示和隐藏。

  2. 全局状态管理：使用@State和@Link装饰器，结合全局状态管理工具（如AppStorage）来共享UI状态，确保不同Page之间的UI同步。

  3. 自定义组件：将全局UI封装为自定义组件，在需要的地方引用，确保UI的一致性和复用性。

  4. 悬浮窗：使用WindowAPI创建悬浮窗，实现全局UI的显示，适用于需要始终显示的UI元素。

这些方法可以根据具体需求灵活组合，实现高效且一致的全局UI管理。

回到顶部