HarmonyOS 基础控件封装想法

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

HarmonyOS

superinsect

2024-12-24 17:36:47

655浏览

回答 1

按赞同

按时间

put_get

@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;
    })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.