HarmonyOS鸿蒙Next中Objectlink UI无法刷新的问题

HarmonyOS鸿蒙Next中Objectlink UI无法刷新的问题

// 水印位置枚举
export enum WatermarkPosition {
  TOP_LEFT = 'top-left',
  TOP_CENTER = 'top-center',
  TOP_RIGHT = 'top-right',
  LEFT_CENTER = 'left-center',
  CENTER = 'center',
  RIGHT_CENTER = 'right-center',
  BOTTOM_LEFT = 'bottom-left',
  BOTTOM_CENTER = 'bottom-center',
  BOTTOM_RIGHT = 'bottom-right'
}

// 水印布局接口：定义水印在照片上的整体位置和样式
@Observed
export class WatermarkLayoutClass {
  position: WatermarkPosition; // 水印位置，例如"bottom-right"或"center"
  rotation: number; // 旋转角度（0-360度），调整水印方向
  scale: number; // 缩放比例，例如 1.0 表示100%
  opacity: number; // 透明度（0.0-1.0），控制水印可见度

  constructor(position: WatermarkPosition, rotation: number, scale: number, opacity: number) {
    this.position = position;
    this.rotation = rotation;
    this.scale = scale;
    this.opacity = opacity;
  }
}
export enum WatermarkElementType {
  TEXT = 'text',
  IMAGE = 'image',
  DYNAMIC_FIELD = 'dynamic_field'
}

export interface Point {
  x: number; // X坐标
  y: number; // Y坐标
}

export interface WatermarkElementStyle {
  font?: string; // 字体，例如"Roboto"，用于文本元素
  font_size?: number; // 字体大小（像素），例如 12
  color?: string; // 文字颜色，例如"#FFFFFF"（白色）
  background_color?: string; // 背景色，例如"#000000"（黑色）
  border?: boolean; // 是否有边框，例如 true 表示显示边框
  animation?: string; // 视频水印动画，例如"fade"或"slide"
  opacity?: number // 透明度（0.0-1.0），控制元素可见度
}

// 水印元素位置接口：定义元素在水印内的相对位置
export interface WatermarkElementPosition extends Point {
  alignment: string;
  // 继承自Point接口，包含x和y坐标
}

export interface WatermarkElement {
  element_id: string; // 元素ID，例如“ELEM-001”，系统生成
  type: WatermarkElementType; // 元素类型，例如"dynamic_field"表示动态字段
  content: string; // 元素内容，例如“project_name”或图片路径
  style: WatermarkElementStyle; // 元素的样式
  position: WatermarkElementPosition; // 元素的位置
}


export interface WatermarkTemplate {
  template_id: string; // 模板ID，例如“TEMPLATE-001”，系统生成
  template_name: string; // 模板名称，例如“建筑标准”，用户定义
  template_type: 'preset' | 'custom' | 'premium'; // 模板类型：预设、自定义、高级
  project_type?: string; // 项目类型，例如“construction”，可选
  creator_id?: string; // 创建者ID，例如“USER-123”，自定义模板时使用
  is_premium: boolean; // 是否为会员专属，例如 true 表示需SuperGrok订阅
  layout: WatermarkLayoutClass; // 水印整体布局
  elements: WatermarkElement[]; // 水印元素数组
  created_at: string; // 创建时间，例如“2025-04-15T14:30:00Z”
  updated_at: string; // 更新时间，例如“2025-04-15T14:30:00Z”
}

@Observed
export class WatermarkTemplateClass implements WatermarkTemplate {
  // 模板ID，例如“TEMPLATE-001”，系统生成
  public template_id: string;

  // 模板名称，例如“建筑标准”，用户定义
  public template_name: string;

  // 模板类型：预设、自定义、高级
  public template_type: 'preset' | 'custom' | 'premium';

  // 项目类型，例如“construction”，可选
  public project_type?: string;

  // 创建者ID，例如“USER-123”，自定义模板时使用
  public creator_id?: string;

  // 是否为会员专属
  public is_premium: boolean;

  // 水印整体布局
  public layout: WatermarkLayoutClass;

  // 水印元素数组
  public elements: WatermarkElement[];

  // 创建时间
  public created_at: string;

  // 更新时间
  public updated_at: string;

  /**
   * @description 构造函数，用于初始化 WatermarkTemplateClass 实例。
   * @param data 用于初始化的数据对象，类型为 WatermarkTemplate。
   */
  constructor(data: WatermarkTemplate) {

    this.template_id = data.template_id;
    this.template_name = data.template_name;
    this.template_type = data.template_type;
    this.project_type = data.project_type;
    this.creator_id = data.creator_id;
    this.is_premium = data.is_premium;
    this.layout = data.layout;
    this.elements = data.elements;
    this.created_at = data.created_at;
    this.updated_at = data.updated_at;
  }
}

页面：

import { WatermarkTemplateClass } from "./test"

@Entry
@Component
export struct WatermarkEditComponent {

  @ObjectLink currentTemplate:WatermarkTemplateClass
  build() {
    Column() {
      // 透明度设置
      Column() {
        Row() {
          Text('透明度')
            .fontSize(16)
            .fontWeight(FontWeight.Medium)
            // .fontColor($r('app.color.black'))
            .layoutWeight(1)

          Text(`${this.currentTemplate.layout.opacity}%`)
            .fontSize(14)
            .borderRadius(8)
            .padding({
              left: 8,
              right: 8,
              top: 4,
              bottom: 4
            })
        }
        .width('100%')
        .margin({ bottom: 12 })

        Slider({
          value: this.currentTemplate.layout.opacity,
          min: 0.1,
          max: 1.0,
          step: 0.1
        })
          .width('100%')
          // .trackColor($r('app.color.common_green'))
          // .selectedColor($r('app.color.shallow_green'))
          .onChange((value: number) => {
            this.currentTemplate.layout.opacity = value
            console.log('信息2--'+ this.currentTemplate.layout.opacity.toString())
          })
      }
      .width('100%')
      .padding(16)
      .borderRadius(12)
      .margin({ bottom: 12 })
    }
  }
}