【鸿蒙软件开发】ArkTS通用事件-阿里云开发者社区

【鸿蒙软件开发】ArkTS通用事件

2024-01-03 224

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【鸿蒙软件开发】ArkTS通用事件

前言

在我们的ArkTS中有一些通用的事件，他们在所有的组件中都可以用，所以我们需要来学习一下。

获得更好的开发体验和效率！！！

一、点击事件

1.1 基础介绍

组件被点击时触发的事件。

名称	支持冒泡	功能描述
onClick(event: (event?: ClickEvent) => void)	否	点击动作触发该回调，event返回值见ClickEvent对象说明。从API version 9开始，该接口支持在ArkTS卡片中使用。

1.2 ClickEvent对象说明

名称	类型	描述
screenX	number	点击位置相对于应用窗口左上角的X坐标。
screenY	number	点击位置相对于应用窗口左上角的Y坐标。
x	number	点击位置相对于被点击元素左上角的X坐标。
y	number	点击位置相对于被点击元素左上角的Y坐标。
timestamp	number
事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。
target	EventTarget	触发事件的元素对象显示区域。
source	SourceType	事件输入设备。

1.3 示例代码

// xxx.ets
@Entry
@Component
struct ClickExample {
  @State text: string = ''
  build() {
    Column() {
      Row({ space: 20 }) {
        Button('Click').width(100).height(40)
          .onClick((event: ClickEvent) => {
            this.text = 'Click Point:' + '\n  screenX:' + event.screenX + '\n  screenY:' + event.screenY
            + '\n  x:' + event.x + '\n  y:' + event.y + '\ntarget:' + '\n  component globalPos:('
            + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n  width:'
            + event.target.area.width + '\n  height:' + event.target.area.height + '\ntimestamp' + event.timestamp;
          })
        Button('Click').width(200).height(50)
          .onClick((event: ClickEvent) => {
            this.text = 'Click Point:' + '\n  screenX:' + event.screenX + '\n  screenY:' + event.screenY
            + '\n  x:' + event.x + '\n  y:' + event.y + '\ntarget:' + '\n  component globalPos:('
            + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n  width:'
            + event.target.area.width + '\n  height:' + event.target.area.height + '\ntimestamp' + event.timestamp;
          })
      }.margin(20)
      Text(this.text).margin(15)
    }.width('100%')
  }
}

二、触摸事件

2.1 基础介绍

组件被点击时触发的事件。

名称	支持冒泡	功能描述
onTouch(event: (event?: TouchEvent) => void)	是	手指触摸动作触发该回调，event返回值见TouchEvent介绍。

2.2 ClickEvent对象说明

名称	类型	描述
type	TouchType	触摸事件的类型。
touches	Array<TouchObject>	全部手指信息。
changedTouches	Array<TouchObject>	当前发生变化的手指信息。
stopPropagation	() => void	阻塞事件冒泡。
timestamp	number
事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。
target	EventTarget	触发事件的元素对象显示区域。
source	SourceType	事件输入设备。

2.3 示例代码

// xxx.ets
@Entry
@Component
struct TouchExample {
  @State text: string = ''
  @State eventType: string = ''
  build() {
    Column() {
      Button('Touch').height(40).width(100)
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {
            this.eventType = 'Down'
          }
          if (event.type === TouchType.Up) {
            this.eventType = 'Up'
          }
          if (event.type === TouchType.Move) {
            this.eventType = 'Move'
          }
          this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
          + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
          + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
          + event.target.area.width + '\nheight:' + event.target.area.height
        })
      Button('Touch').height(50).width(200).margin(20)
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {
            this.eventType = 'Down'
          }
          if (event.type === TouchType.Up) {
            this.eventType = 'Up'
          }
          if (event.type === TouchType.Move) {
            this.eventType = 'Move'
          }
          this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
          + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
          + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
          + event.target.area.width + '\nheight:' + event.target.area.height
        })
      Text(this.text)
    }.width('100%').padding(30)
  }
}

二、焦点事件

2.2 基础介绍

焦点事件指页面焦点在可获焦组件间移动时触发的事件，组件可使用焦点事件来处理相关逻辑。

名称	支持冒泡	功能描述
onFocus(event: () => void)	否	当前组件获取焦点时触发的回调。
onBlur(event:() => void)	否	当前组件失去焦点时触发的回调。

3.2 示例代码

// xxx.ets
@Entry
@Component
struct FocusEventExample {
  @State oneButtonColor: string = '#FFC0CB'
  @State twoButtonColor: string = '#87CEFA'
  @State threeButtonColor: string = '#90EE90'
  build() {
    Column({ space: 20 }) {
      // 通过外接键盘的上下键可以让焦点在三个按钮间移动，按钮获焦时颜色变化，失焦时变回原背景色
      Button('First Button')
        .backgroundColor(this.oneButtonColor)
        .width(260)
        .height(70)
        .fontColor(Color.Black)
        .focusable(true)
        .onFocus(() => {
          this.oneButtonColor = '#FF0000'
        })
        .onBlur(() => {
          this.oneButtonColor = '#FFC0CB'
        })
      Button('Second Button')
        .backgroundColor(this.twoButtonColor)
        .width(260)
        .height(70)
        .fontColor(Color.Black)
        .focusable(true)
        .onFocus(() => {
          this.twoButtonColor = '#FF0000'
        })
        .onBlur(() => {
          this.twoButtonColor = '#87CEFA'
        })
      Button('Third Button')
        .backgroundColor(this.threeButtonColor)
        .width(260)
        .height(70)
        .fontColor(Color.Black)
        .focusable(true)
        .onFocus(() => {
          this.threeButtonColor = '#FF0000'
        })
        .onBlur(() => {
          this.threeButtonColor = '#90EE90'
        })
    }.width('100%').margin({ top: 20 })
  }
}