ArkUI实战：可拖动卡片、隐私模式与全局水印的实现

第一章：可拖动卡片与背景模糊处理

引言
在现代移动应用中，可拖动卡片是一种非常流行的交互设计方式。它不仅可以提升用户体验，还能使界面更加灵活和直观。同时，背景模糊处理能够增强视觉层次感，让用户的注意力集中在卡片内容上。本文将介绍如何在 ArkUI 中实现可拖动卡片，并结合背景模糊处理，打造出更具吸引力的界面效果。

效果图：

创建一个拖拽手势 (PanGesture) 实例。

1. .onActionStart
   当拖拽动作开始时触发。

   • 将 this.isDragging 设置为 true，表示当前正在拖拽。

2. .onActionUpdate
   在拖拽过程中持续触发。

   • event.offsetX 和 event.offsetY 是当前拖拽的偏移量（相对于拖拽开始时的位置）。

   • 通过 this.positionX + event.offsetX 和 this.positionY + event.offsetY 计算新的位置，并更新到 this.offsetX 和 this.offsetY。

3. .onActionEnd
   当拖拽动作结束时触发。

   • 将最终的偏移量 (this.offsetX 和 this.offsetY) 保存到 this.positionX 和 this.positionY，用于记录拖拽结束后的位置。

   • 将 this.isDragging 设置为 false，表示拖拽结束。

.gesture(
        PanGesture(this.panOption)
          .onActionStart((event: GestureEvent) => {
            this.isDragging=true
          })
          .onActionUpdate((event: GestureEvent) => {
            if (event) {
              this.offsetX = this.positionX + event.offsetX
              this.offsetY = this.positionY + event.offsetY
            }
          })
          .onActionEnd((event: GestureEvent) => {
            this.positionX = this.offsetX
            this.positionY = this.offsetY
            this.isDragging=false
          })
      )

拖动时模糊：

.backgroundBlurStyle(this.isDragging?BlurStyle.Thin:BlurStyle.NONE)

第二章：隐私模式与防截屏功能

引言
在现代移动应用中，隐私保护是一个至关重要的功能。无论是支付应用、聊天工具，还是企业级应用，防止敏感信息泄露都是开发者的首要任务。ArkUI 提供了强大的隐私保护功能，包括设置窗口隐私模式和防止截屏。本章将详细介绍如何实现这些功能，并确保应用在隐私保护方面达到最高标准。

效果图：

防截图是涉及到权限操作的，所以需要先去module.json5配置权限

"requestPermissions": [
      {
        "name": "ohos.permission.PRIVACY_WINDOW",
        "usedScene": {
          "abilities": [
            "FormAbility"
          ],
          "when": "inuse"
        }
      }
    ],

配置完权限之后，调用方法，在进去页面前的启用方法。参考文档文档中心

set_privacy(){
    try {
      window.getLastWindow(getContext(), (err: BusinessError, data) => {
        const errCode = err.code;
        if (errCode) {
          return;
        }
        let promise = data.setWindowPrivacyMode(true);
        promise.then(() => {
          hilog.info(0x0000, 'testTag', '已成功将窗口设置为隐私模式.');
        }).catch((err: BusinessError) => {
          hilog.error(0x0000, 'testTag', 'Failed to set the window to privacy mode. Cause: ' + JSON.stringify(err));
        });
      });
    } catch (exception) {
      hilog.error(0x0000, 'testTag', 'Failed to set the window to privacy mode. Cause:' + JSON.stringify(exception));
    }
  }

第三章：全局水印的实现

引言
全局水印是一种常见的信息保护手段，广泛应用于企业级应用、文档管理系统以及敏感信息展示场景。通过在水印中嵌入用户信息、时间戳或版权声明，可以有效追踪信息泄露的源头，并防止未经授权的复制和传播。本章将详细介绍如何在 ArkUI 中实现全局水印功能，并探讨如何优化水印的视觉效果和性能。

效果图：

        

使用 Canvas 绘制水印ArkUI 提供了强大的 Canvas 组件，可以用于绘制自定义图形和文本。我们可以利用 Canvas 在页面上绘制全局水印。

@Component
struct WaterMarkView {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  build() {
    Canvas(this.context)
      .width('100%')
      .height('100%')
      .hitTestBehavior(HitTestMode.Transparent)
      .onReady(() => {
        // TODO:知识点:通过canvas绘制水印
        this.context.fillStyle = '#10000000';
        this.context.font = '16vp';
        this.context.textAlign = 'center';
        this.context.textBaseline = 'middle';
        for (let i = 0; i < this.context.width / 120; i++) {
          this.context.translate(120, 0);
          let j = 0;
          for (; j < this.context.height / 120; j++) {
            this.context.rotate(-Math.PI / 180 * 30);
            this.context.fillText('写雨.0', -60, -60);
            this.context.rotate(Math.PI / 180 * 30);
            this.context.translate(0, 120);
          }
          this.context.translate(0, -120 * j);
        }
      })
  }
}

@Builder
export function createWaterMarkView() {
  WaterMarkView()
    .hitTestBehavior(HitTestMode.None) // 必须设置其触摸测试为None或者transparent，否则正常组件无法响应时间
}

再在需要使用的界面调用即可

.overlay(createWaterMarkView())  // 水印效果，只需要在组件加上默认属性overlay即可

适用HarmonyOS NEXT / API12或以上版本 -----------------