HarmonyOS 基础控件封装想法？

Question

现在假如需要对于如text、iamge、column这种基础控件作为最小单元进行封装，这种方法有什么好的例子吗，或者说是否推荐这种处理方式，以及需要特殊化处理的基础控件有什么好的例子吗？（最好是@ComponentV2）

Answer 1

@Builder
export function SimpleObjectBuilderV2(name: string, param: Object) {
  SimpleObject()
}

@ObservedV2
class LogTrack {
  @Trace str1: string;
  str2: string;

  constructor(str1: string) {
    this.str1 = str1;
    this.str2 = 'World';
  }
}

@ComponentV2
struct SimpleObject {
  pathStack: NavPathStack = new NavPathStack()
  logTrack: LogTrack = new LogTrack('hello');

  isRender(index: number) {
    console.log(`Text ${index} is rendered`);
    return 50;
  }

  build() {
    NavDestination() {
      Column() {
        Text(this.logTrack.str1)// UINode1
          .fontSize(this.isRender(1))
          .fontWeight(FontWeight.Bold)
        Text(this.logTrack.str2)// UINode2
          .fontSize(this.isRender(2))
          .fontWeight(FontWeight.Bold)
        Button('change logTrack.str1')
          .onClick(() => {
            // 点击更新Str1和str2，str1使用了@Trace修饰，UI界面正常刷新，Str2没有修饰，UI界面不刷新
            this.logTrack.str1 = 'Bye';
            this.logTrack.str2 = '世界';
          })
      }
    }.onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}