主页 > 手机  > 

鸿蒙Next开发-添加水印以及点击穿透设置

鸿蒙Next开发-添加水印以及点击穿透设置

在鸿蒙Next中,为App全局添加水印可以通过以下方式实现,其中通过窗口添加水印是一种常见且高效的方式。以下是具体方案和实现细节:


一、全局水印的实现方式 1. 窗口叠加水印(首选、推荐)

原理:在应用的主窗口(Window)上叠加一个半透明的水印层,覆盖所有页面内容。优势:实现简单、性能较好,无需侵入业务逻辑。实现步骤:

(1) 创建全局水印组件

通过Stack布局在主页面内容上叠加水印层,通过设置hitTestBehavior(HitTestMode.Transparent)控制水印层不拦截点击事件,可结合文章<鸿蒙next开发-struct如何封装共用模块>把水印功能放到公共父模块里边去

// WatermarkComponent.ets @Component export struct WatermarkComponent {   @State watermarkText: string = "水印内容"    build() {     Stack() {       // 主应用内容(通过插槽传递)       Column() {         Slot() // 占位符,用于承载实际页面内容       }       // 水印层(覆盖整个窗口)       Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {         ForEach(Array(20).fill(0), (_, index) => {           Text(this.watermarkText)             .fontSize(16)             .fontColor("#999999")             .opacity(0.3)             .rotate({ angle: -30 })             .margin(20)         })       }       .width('100%')       .height('100%')   .backgroundColor(Color.Transparent).hitTestBehavior(HitTestMode.Transparent)// 关键:设置水印层不拦截点击事件,否则水印下按钮点击失效。     }   } } (2) 在入口页面应用水印 // MainPage.ets @Entry @Component struct MainPage {   build() {     WatermarkComponent() {       // 此处放置实际页面内容       Column() {         Text("这是应用的主页面")           .fontSize(24)         // 其他组件...       }     }   } } (3) 动态更新水印内容

可通过@State或@Link实现水印动态化(如用户ID、时间戳):

@State watermarkText: string = `用户:张三 ${new Date().toLocaleString()}` // 更新水印 updateWatermark() {   this.watermarkText = `用户:张三 ${new Date().toLocaleString()}` }
2. 全局悬浮窗水印

适用场景:需要跨多个Ability或独立于页面层级的水印。实现步骤:

(1) 创建悬浮窗服务 // WatermarkService.ets import window from '@ohos.window'; export class WatermarkService {   private static instance: WatermarkService | null = null;   private watermarkWindow: window.Window | null = null;   static getInstance() {     if (!this.instance) {       this.instance = new WatermarkService();     }     return this.instance;   }   async showWatermark() {     try {       this.watermarkWindow = await window.createWindow("watermark", window.WindowType.TYPE_FLOAT);       await this.watermarkWindow.moveTo(0, 0);       await this.watermarkWindow.resize(window.Size.FULL_SCREEN);       await this.watermarkWindow.setTouchable(false); // 禁止交互       await this.watermarkWindow.loadContent("pages/WatermarkPage");       await this.watermarkWindow.show();     } catch (err) {       console.error('悬浮窗创建失败:', err);     }   } } (2) 初始化全局水印 // App.ets import { WatermarkService } from './WatermarkService'; export default class App {   onCreate() {     WatermarkService.getInstance().showWatermark(); // 应用启动时显示水印   } }
3. 自定义Ability水印

适用场景:需要与业务逻辑深度绑定的动态水印。实现步骤:

// WatermarkAbility.ets import Ability from '@ohos.application.Ability'; export default class WatermarkAbility extends Ability {   onWindowStageCreate(windowStage) {     windowStage.loadContent("pages/WatermarkPage", (err) => {       if (err) console.error("水印页面加载失败:", err);     });   } }
二、技术对比与选型建议 方案优点缺点适用场景窗口叠加水印

实现简单、性能高、无额外权限

需修改页面层级结构

单Ability应用、快速集成

全局悬浮窗

跨Ability生效、独立层级

需要悬浮窗权限、性能开销略高

企业级应用、高安全需求

自定义Ability

灵活控制水印生命周期

实现复杂度高

需要动态控制水印的场景


三、安全增强技巧

防截图绕过:

// 禁止截屏(需在config.json配置权限) import window from '@ohos.window'; window.getTopWindow().then(win => {   win.setWindowPrivacyMode(true); // 开启隐私模式 });

动态水印:

// 绑定设备信息 import deviceInfo from '@ohos.deviceInfo'; this.watermarkText = `设备ID: ${deviceInfo.deviceId}`;

混淆水印元素:

// 随机角度和位置 .rotate({ angle: -30 + Math.random() * 10 }) .position({ x: `${Math.random() * 100}%`, y: `${Math.random() * 100}%` })
四、总结

窗口叠加水印是最高效的实现方式,适合大多数场景。

若需跨Ability或更高安全级别,推荐全局悬浮窗方案。

通过Stack布局和Flex组件的灵活组合,可实现高密度、动态更新的水印效果。

关注我获取更多知识或者投稿

标签:

鸿蒙Next开发-添加水印以及点击穿透设置由讯客互联手机栏目发布,感谢您对讯客互联的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人网站或者朋友圈,但转载请说明文章出处“鸿蒙Next开发-添加水印以及点击穿透设置