@State 修饰的变量值改变，界面不刷新

@State testState: Object = { 
  "a": "aaaaaaa", 
  "b": "bbbbbbb", 
  "c": "ccccccc", 
  "d": "ddddddd", 
} 
@Builder 
buildTestItemView(data: string) { 
  Text(data).fontColor(Color.Black).fontSize(14) 
} 
 
build() { 
  Column() { 
    this.buildTestItemView(this.testState["a"]) 
    this.buildTestItemView(this.testState["b"]) 
    this.buildTestItemView(this.testState["c"]) 
    this.buildTestItemView(this.testState["d"]) 
  }.onClick(() => { 
    this.testState = { 
      "a": "zzzzzzzz", 
      "b": "yyyyyyyy", 
      "c": "xxxxxxxx", 
      "d": "wwwwwwww", 
    } 
  }) 
 
}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.

1.colum很难被点击到，因为被其上的text挡住了。

2.text的文本属性没有直接与@state 修饰的根变量绑定。@state的详细用法可以参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state-0000001774279614

HarmonyOS

dickhome

2024-05-30 22:38:15

浏览

回答 1

按赞同

按时间

e_leaner

示例代码：

@Entry 
@Component 
struct Page { 
  @State testState: Object = { 
    "a": "aaaaaaa", 
    "b": "bbbbbbb", 
    "c": "ccccccc", 
    "d": "ddddddd", 
  } 
  @Builder 
  buildTestItemView(name:string) { 
    Column({space:10}){ 
      Text(this.testState[name]) 
        .fontColor(Color.Black) 
        .fontSize(30) 
        .height(50) 
        .width('50%') 
        .backgroundColor('#ffbde9b9') 
        .onClick(() => { 
          console.log('文本被点击',this.testState[name]); 
        }) 
    } 
 
  } 
 
  build() { 
    Column({space:10}) { 
      this.buildTestItemView('a') 
      this.buildTestItemView('b') 
      this.buildTestItemView('c') 
      this.buildTestItemView('d') 
 
      Text(`${this.testState['a']}`) 
        .fontColor(Color.Black) 
        .fontSize(50) 
        .height(70) 
        .width('80%') 
        .backgroundColor('#ffd4e2e2') 
        .onClick(() => { 
          console.log('文本被点击',Object['a']) 
        }) 
    } 
    .backgroundColor('#ff5c7bae') 
    .width('100%') 
    .height('100%') 
    .onClick(() => { 
      console.log('容器被点击'); 
      this.testState = { 
        "a": "zzzzzzzz", 
        "b": "yyyyyyyy", 
        "c": "xxxxxxxx", 
        "d": "wwwwwwww", 
      } 
    }) 
 
  } 
}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.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.