HarmonyOS ArkUI-eTS通用事件监听

​​想了解更多内容，请访问：​​

​​51CTO和华为官方合作共建的鸿蒙技术社区​​

​​https://harmonyos.51cto.com​​

1.点击事件

支持版本： eTS API Version 7+

事件名称： onClick(callback: (event?: ClickEvent) => void)

ClickEvent对象：

screenX(点击点相对于设备屏幕左边沿的X坐标)

screenY(点击点相对于设备屏幕右边沿的Y坐标)

x(点击点相对于被点击元素左边沿的X坐标)

y(点击点相对于被点击元素上边沿的Y坐标)

timestamp(事件时间戳)

target(API Version 8+ 支持此属性)/类型：EventTarget

使用示例：

@Entry
@Component
struct Sample {
  @State text: string = ''
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('点击按钮').backgroundColor(Color.Blue).width('50%').height(50)
        .onClick((event: ClickEvent) => {
          console.info(this.text = '点击点相对于屏幕位置:' + 'n  相对于屏幕左边X:' + event.screenX + 'n  相对于屏幕顶部Y:' + event.screenY
          + 'n所点击按钮:' + 'n  点击点相对于父元素坐标:n （x:'
          + event.target.area.globalPos.x + ',y:' + event.target.area.globalPos.y + '）n  所点击按钮宽度:'
          + event.target.area.width + 'n  所点击按钮高度：' + event.target.area.height)
        })
      Text(this.text).fontSize(15).padding(15)
    }
    .width('100%')
    .height('100%')
  }
}

效果演示：

2.触摸事件

支持版本： eTS API Version 7+

事件名称： onTouch(callback: (event?: TouchEvent) => void)

TouchEvent对象：

type(触摸事件的类型) / 类型：TouchType

–>TouchType.Down(手指按下时触发)

–>TouchType.Up(手指抬起时触发)

–>TouchType.Move(手指按压在屏幕上移动时触发)

–>TouchType.Cancel(触摸事件取消时触发)

touches(全部手指信息)

changedTouches(当前发生变化的手指信息)

timestamp(事件时间戳)

target(被触摸元素对象)–>此属性可参考上方点击事件中表格参数

使用示例：

@Entry
@Component
struct Sample {
  @State text: string = ''
  @State eventType: string=''
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('触摸按钮').backgroundColor(Color.Blue).width('70%').height(60)
      .onTouch((event:TouchEvent)=>{
        if(event.type == TouchType.Down){
          this.eventType = '按下'
        }
        if(event.type == TouchType.Up){
          this.eventType = '抬起'
        }
        if(event.type == TouchType.Move){
          this.eventType = '按下移动'
        }
        console.info(this.text = '触摸类型:' + this.eventType)
      })
      Text(this.text).fontSize(15).padding(15)
    }
    .width('100%')
    .height('100%')
  }
}

效果演示：

3.挂载卸载事件

支持版本： eTS API Version 7+

事件名称：

1.onAppear(callback: () => void)

2.onDisappear(callback: () => void)

关键操作： import prompt from ‘@system.prompt’

注意事项： 因需要读取设备系统信息，运行需要在模拟真机或真机运行

使用示例：

import prompt from '@system.prompt';
@Entry
@Component
struct Sample {
  private text: string = '挂载文本'
  @State isShow: boolean = true
  private changeAppear: string = '隐藏文本'
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button(this.changeAppear)
        .backgroundColor(Color.Blue)
        .width(100)
        .height(60)
        .onClick(() => {
          this.isShow = !this.isShow
        })
      if (this.isShow) {
        Text(this.text)
          .fontSize(20)
        //挂载
          .onAppear(() => {
            this.changeAppear = '显示文本'
            prompt.showToast({ message: '文本显示', duration: 2000 })
          })
        //卸载
          .onDisAppear(() => {
            this.changeAppear = '隐藏文本'
            prompt.showToast({ message: '文本隐藏', duration: 2000 })
          })
      }
    }
    .width('100%')
    .height('100%')
  }
}

效果演示：

4.按键事件

支持版本： eTS API Version 7+

事件名称： onKeyEvent(event: (event?: KeyEvent) => void)

KeyEvent对象：

type(按键事件的类型) / 类型：KeyType

–>TouchType.Down(按下按键)

–>TouchType.Up(松开按键)

KeySource(触发当前按键的输入设备类型) / 类型：KeySource

–>KeySource.Unknown(输入设备类型未知)

–>KeySource.Keyboard(输入设备类型为键盘)

KeyCode(按键的键码)

注意事项： 因需要读取设备系统信息，运行需要在模拟真机或真机运行

使用示例：

@Entry
@Component
struct Sample {
  @State text: string = ''
  @State eventType: string = ''
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('按键')
        .backgroundColor(Color.Blue)
        .width(100)
        .height(60)
        .onKeyEvent((event: KeyEvent) => {
          if (event.type === KeyType.Down) {
            this.eventType = '按下'
          }
          if (event.type === KeyType.Up) {
            this.eventType = '松开'
          }
          console.info(this.text = '按键类型:' + this.eventType + 'n键码:' + event.keyCode + 'n键值:' + event.keyText)
        })
      Text(this.text).fontSize(15)
    }
    .width('100%')
    .height('100%')
  }
}

效果演示：

​​想了解更多内容，请访问：​​

​​51CTO和华为官方合作共建的鸿蒙技术社区​​

​​https://harmonyos.51cto.com​​