HarmonyOS鸿蒙Next中ArkUI如何实现给整个app添加水印

HarmonyOS鸿蒙Next中ArkUI如何实现给整个app添加水印 怎么给整个app添加水印

3 回复

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

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中ArkUI如何实现给整个app添加水印的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用ArkUI给整个App添加水印可以通过自定义组件和全局样式来实现。首先，创建一个自定义的水印组件，该组件包含水印文本或图片，并设置透明度、旋转角度等样式。然后，将这个水印组件作为根组件的子组件，确保它覆盖整个App界面。

具体步骤如下：

  1. 创建水印组件：使用@Component装饰器定义一个水印组件，设置水印的文本、字体、颜色、透明度、旋转角度等属性。可以使用Canvas组件绘制水印，或者直接使用Text组件。

  2. 全局样式：在App.ets或主页面中，将水印组件作为根组件的子组件，并设置其样式为position: absolute，使其覆盖整个屏幕。

  3. 动态更新：如果需要动态更新水印内容，可以通过@State或@Prop装饰器来管理水印的状态，并在状态变化时重新渲染水印组件。

示例代码：

@Component
struct Watermark {
  @State private text: string = 'Confidential'

  build() {
    Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Text(this.text)
        .fontSize(20)
        .fontColor('#000000')
        .opacity(0.2)
        .rotate({ angle: -45 })
    }
    .width('100%')
    .height('100%')
    .position({ x: 0, y: 0 })
  }
}

@Entry
@Component
struct App {
  build() {
    Stack() {
      // 其他页面内容
      Watermark()
    }
  }
}

通过这种方式，可以在整个App中实现水印效果。

在HarmonyOS鸿蒙Next中，使用ArkUI实现给整个App添加水印可以通过以下步骤：

  1. 创建水印组件：使用Text或Image组件创建水印内容，设置透明度、旋转角度等样式。
  2. 覆盖水印组件：将水印组件放置在Stack布局的最上层，确保覆盖整个页面。
  3. 全局应用：在EntryAbility或MainAbility的onWindowStageCreate方法中，将水印组件添加到根布局，确保所有页面都显示水印。

示例代码：

import { Stack, Text } from '@ohos.arkui';

const watermark = <Text opacity={0.3} rotate={-30}>Watermark</Text>;
const rootView = <Stack>{watermark}{/* 其他内容 */}</Stack>;

通过这种方式，水印将覆盖整个App的所有页面。

回到顶部