#鸿蒙通关秘籍#如何实现按钮点击事件实现图片显示和隐藏

@Entry
@Component
struct IfElseTransition {
  @State flag: boolean = true;
  @State btnMsg: string = 'show';

  build() {
    Column() {
      Button(this.btnMsg).width(80).height(30).margin(30)
        .onClick(() => {
          if (this.flag) {
            this.btnMsg = 'hide';
          } else {
            this.btnMsg = 'show';
          }
          this.flag = !this.flag; // 切换状态控制Image的显示和隐藏
        })
      if (this.flag) {
        Image($r('app.media.icon')).width(200).height(200) // 条件渲染Image
      }
    }.height('100%').width('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.