HarmonyOS 如何给windows添加全局水印并通过appstorage设置内容和管理开关?

HarmonyOS 如何给windows添加全局水印并通过appstorage设置内容和管理开关?

HarmonyOS
2024-10-28 11:22:19
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
鱼弦CTO
1

在 HarmonyOS 中,为窗口添加全局水印并通过 AppStorage 管理水印内容和开关,可以通过以下方式实现:

### 实现步骤

  1. 创建全局水印组件: 创建一个水印组件,负责显示水印文本。可以通过 AppStorage 进行控制和管理。
  2. 使用 AppStorage 存储水印状态和内容: 使用 @app-storage 存储水印的显示状态和内容,以便在应用的不同部分访问和修改这些信息。
  3. 在应用中引入水印组件: 在应用的根页面或需要显示水印的页面添加该组件。

### 示例代码

#### Step 1: 创建 Watermark 组件

##### Watermark.hml

<!-- Watermark.hml -->
@entry
<div if="{{showWatermark}}" class="watermark-container">
    <text>{{watermarkText}}</text>
</div>

##### Watermark.hss

/* Watermark.hss */
.watermark-container {
    position: fixed;
    top: 10px;
    left: 10px;
    opacity: 0.5;
    color: #888;
    font-size: 20px;
    z-index: 1000;
}

##### Watermark.js

// Watermark.js
import app from '@system.app';

export default {
    data: {
        showWatermark: false,
        watermarkText: ''
    },
    onInit() {
        // 从 AppStorage 获取水印显示状态和内容
        this.showWatermark = app.storage.getOrDefault('showWatermark', false);
        this.watermarkText = app.storage.getOrDefault('watermarkText', 'Sample Watermark');
        
        // 监听 AppStorage 的变化
        app.storage.on('showWatermark', (value) => {
            this.showWatermark = value;
        });

        app.storage.on('watermarkText', (value) => {
            this.watermarkText = value;
        });
    }
}

#### Step 2: 存储和管理水印状态

##### 在应用初始化或设置页面更新 AppStorage 状态

// Example of setting AppStorage values
import app from '@system.app';

// 初始化时设置默认值
app.storage.set('showWatermark', false);
app.storage.set('watermarkText', 'Confidential');

// 可以在设置页面中提供选项来更新这些值
function toggleWatermark() {
    let currentStatus = app.storage.get('showWatermark');
    app.storage.set('showWatermark', !currentStatus);
}

function updateWatermarkText(newText) {
    app.storage.set('watermarkText', newText);
}

#### Step 3: 在你的主页面中引用 Watermark 组件

##### MainPage.hml

<!-- MainPage.hml -->
<component src="@resources/Watermark"></component>

<div>
    <!-- 其他页面内容 -->
    <button onclick="toggleWatermark()">Toggle Watermark</button>
    <input placeholder="Enter Watermark Text" onblur="updateWatermarkText($event.value)" />
</div>

### 总结

上述实现创建了一个全局水印系统,通过 ​​AppStorage​​ 进行状态管理和文本内容更新。用户可以通过按钮和输入框动态地切换水印的显示状态,并更改水印内容。这样设计不仅提高了灵活性,还有助于保持应用的统一管理。

分享
微博
QQ
微信
回复
2024-10-28 15:29:05
Heiang

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

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

​另外可以通过用户首选项实现数据持久化,可参考以下文档:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/data-persistence-by-preferences-V5

分享
微博
QQ
微信
回复
2024-10-28 16:55:03
相关问题
HarmonyOS 如何 app 添加水印
345浏览 • 1回复 待解决
text内容如何实时获取添加修改?
3352浏览 • 1回复 待解决
如何使用canvas添加水印
1303浏览 • 1回复 待解决
HarmonyOS是否支持图片添加水印
292浏览 • 1回复 待解决
基于原生的水印添加能力
755浏览 • 1回复 待解决
如何按钮添加图片?
5481浏览 • 4回复 待解决
如何添加内容添加渐变模糊
326浏览 • 1回复 待解决
如何组件添加双击事件?
444浏览 • 1回复 待解决
HarmonyOS 如何image设置遮罩 ?
270浏览 • 1回复 待解决
文本添加上划线如何实现?
373浏览 • 1回复 待解决
如何文字添加下划线?
573浏览 • 1回复 待解决