HarmonyOS ArkUI-eTS通用事件监听原创精华

彬彬不吃冰

发布于 2022-2-17 13:46

浏览

5收藏

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

名称
类型
描述


EventTarget
Area
目标元素的区域信息

Area.width
Length
目标元素的宽度

Area.height
Lenth
目标元素的高度

Area.pos
Position
目标元素左上角相对父元素左上角的位置

Area.globalPos
Position
目标元素左上角相对页面左上角的位置

Position.x
Length
x轴坐标

Position.y
Length
y轴坐标

名称	类型	描述
EventTarget	Area	目标元素的区域信息
Area.width	Length	目标元素的宽度
Area.height	Lenth	目标元素的高度
Area.pos	Position	目标元素左上角相对父元素左上角的位置
Area.globalPos	Position	目标元素左上角相对页面左上角的位置
Position.x	Length	x轴坐标
Position.y	Length	y轴坐标

使用示例：

@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%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

效果演示：
HarmonyOS ArkUI-eTS通用事件监听-鸿蒙开发者社区

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

效果演示：
HarmonyOS ArkUI-eTS通用事件监听-鸿蒙开发者社区

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

效果演示：
HarmonyOS ArkUI-eTS通用事件监听-鸿蒙开发者社区

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