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

在按钮的点击事件中，可以通过切换状态变量来实现图片的显示和隐藏。以下是具体示例代码：

@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%')
  }
}

通过点击按钮，更新btnMsg和flag状态，切换图片的显示与隐藏。