ArkTS onclick()点击事件的用法（附带实例）

点击事件是指通过手指或手写笔做出一次完整的按下和抬起动作。当发生点击事件时，会触发以下回调函数：

onClick(event: (event?: ClickEvent) => void)

其中，event 参数提供点击事件相对于窗口或组件的坐标位置，以及发生点击的事件源。

我们可以通过按钮的点击事件来控制图片的显示和隐藏，示例代码如下：

@Entry
@Component
struct Demo0301 {
  // 标记显示的状态
  @State flag: boolean = true;
  // 按钮的文本内容
  @State btnMsg: string = '显示';

  build() {
    Column() {
      // 设置按钮
      Button(this.btnMsg)
        .onClick(() => {
          // 设置点击事件函数
          if (this.flag) {
            this.btnMsg = '隐藏';
          } else {
            this.btnMsg = '显示';
          }
          // 点击 Button 控制 Image 的显示和消失
          this.flag = !this.flag;
        })
        .width('50%')
        .margin(10);

      // 根据 flag 决定是否显示图片
      if (this.flag) {
        Image($r('app.media.startIcon'))
          .width(200)
          .height(200);
      }
    }
    .width('100%');
  }
}

显示效果如下图所示：