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

发布于 2022-2-17 13:46
浏览
4收藏

春节不停更,此文正在参加[星光计划-春节更帖活动] https://harmonyos.51cto.com/posts/9923

@toc

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

::: hljs-center

名称 类型 描述
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%')
  }
}

::: hljs-center

效果演示:
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%')
  }
}

::: hljs-center

效果演示:
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%')
  }
}

::: hljs-center

效果演示:
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%')
  }
}

::: hljs-center

效果演示:
HarmonyOS ArkUI-eTS通用事件监听-开源基础软件社区

:::

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-2-17 13:51:10修改
3
收藏 4
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐