HarmonyOS ArkUI-eTS通用事件監聽
??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%')
}
}
效果演示：
??https://harmonyos.51cto.com??
