codecamp

触屏事件

触屏事件指当手指/手写笔在组件上按下、滑动、抬起时触发的回调事件。包括点击事件拖拽事件触摸事件

图1 触摸事件原理

点击事件

点击事件是指通过手指或手写笔做出一次完整的按下和抬起动作。当发生点击事件时,会触发以下回调函数:

  1. onClick(event: (event?: ClickEvent) => void)

event参数提供点击事件相对于窗口或组件的坐标位置,以及发生点击的事件源。

例如通过按钮的点击事件控制图片的显示和隐藏。
  1. @Entry
  2. @Component
  3. struct IfElseTransition {
  4. @State flag: boolean = true;
  5. @State btnMsg: string = 'show';
  6. build() {
  7. Column() {
  8. Button(this.btnMsg).width(80).height(30).margin(30)
  9. .onClick(() => {
  10. if (this.flag) {
  11. this.btnMsg = 'hide';
  12. } else {
  13. this.btnMsg = 'show';
  14. }
  15. // 点击Button控制Image的显示和消失
  16. this.flag = !this.flag;
  17. })
  18. if (this.flag) {
  19. Image($r('app.media.icon')).width(200).height(200)
  20. }
  21. }.height('100%').width('100%')
  22. }
  23. }

拖拽事件

拖拽事件指手指/手写笔长按组件(>=500ms),并拖拽到接收区域释放的事件。拖拽事件触发流程:

拖拽事件的触发通过长按、拖动平移判定,手指平移的距离达到5vp即可触发拖拽事件。ArkUI支持应用内、跨应用的拖拽事件。

拖拽事件提供以下接口

接口名称

描述

onDragStart(event: (event?: DragEvent, extraParams?: string) => CustomBuilder | DragItemInfo)

拖拽启动接口。当前仅支持自定义pixelmap和自定义组件。

onDragEnter(event: (event?: DragEvent, extraParams?: string) => void)

拖拽进入组件接口。DragEvent定义拖拽发生位置,extraParmas表示用户自定义信息

onDragLeave(event: (event?: DragEvent, extraParams?: string) => void)

拖拽离开组件接口。DragEvent定义拖拽发生位置,extraParmas表示拖拽事件额外信息。

onDragMove(event: (event?: DragEvent, extraParams?: string) => void)

拖拽移动接口。DragEvent定义拖拽发生位置,extraParmas表示拖拽事件额外信息。

onDrop(event: (event?: DragEvent, extraParams?: string) => void)

拖拽释放组件接口。DragEvent定义拖拽发生位置,extraParmas表示拖拽事件额外信息。

如下是跨窗口拖拽,拖出窗口示例:

  1. import image from '@ohos.multimedia.image';
  2. @Entry
  3. @Component
  4. struct Index {
  5. @State visible: Visibility = Visibility.Visible
  6. private pixelMapReader = undefined
  7. aboutToAppear() {
  8. console.info('begin to create pixmap has info message: ')
  9. this.createPixelMap()
  10. }
  11. createPixelMap() {
  12. let color = new ArrayBuffer(4 * 96 * 96);
  13. var buffer = new Uint8Array(color);
  14. for (var i = 0; i < buffer.length; i++) {
  15. buffer[i] = (i + 1) % 255;
  16. }
  17. let opts = {
  18. alphaType: 0,
  19. editable: true,
  20. pixelFormat: 4,
  21. scaleMode: 1,
  22. size: { height: 96, width: 96 }
  23. }
  24. const promise = image.createPixelMap(color, opts);
  25. promise.then((data) => {
  26. console.info('create pixmap has info message: ' + JSON.stringify(data))
  27. this.pixelMapReader = data;
  28. })
  29. }
  30. @Builder pixelMapBuilder() {
  31. Text('drag item')
  32. .width('100%')
  33. .height(100)
  34. .fontSize(16)
  35. .textAlign(TextAlign.Center)
  36. .borderRadius(10)
  37. .backgroundColor(0xFFFFFF)
  38. }
  39. build() {
  40. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  41. Text('App1')
  42. .width('40%')
  43. .height(80)
  44. .fontSize(20)
  45. .margin(30)
  46. .textAlign(TextAlign.Center)
  47. .backgroundColor(Color.Pink)
  48. .visibility(Visibility.Visible)
  49. Text('Across Window Drag This')
  50. .width('80%')
  51. .height(80)
  52. .fontSize(16)
  53. .margin(30)
  54. .textAlign(TextAlign.Center)
  55. .backgroundColor(Color.Pink)
  56. .visibility(this.visible)
  57. .onDragStart(() => { //启动跨窗口拖拽
  58. console.info('Text onDrag start')
  59. return { pixelMap: this.pixelMapReader, extraInfo: 'custom extra info.' }
  60. })
  61. .onDrop((event: DragEvent, extraParams: string) => {
  62. console.info('Text onDragDrop, ')
  63. this.visible = Visibility.None //拖动结束后,使源不可见
  64. })
  65. }
  66. .width('100%')
  67. .height('100%')
  68. }
  69. }

跨窗口拖拽,拖入示例:

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State number: string[] = ['drag here']
  5. @State text: string = ''
  6. @State bool1: boolean = false
  7. @State bool2: boolean = false
  8. @State visible: Visibility = Visibility.Visible
  9. @State visible2: Visibility = Visibility.None
  10. scroller: Scroller = new Scroller()
  11. build() {
  12. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  13. Text('App2')
  14. .width('40%')
  15. .height(80)
  16. .fontSize(20)
  17. .margin(30)
  18. .textAlign(TextAlign.Center)
  19. .backgroundColor(Color.Pink)
  20. .visibility(Visibility.Visible)
  21. List({ space: 20, initialIndex: 0 }) {
  22. ForEach(this.number, (item) => {
  23. ListItem() {
  24. Text('' + item)
  25. .width('100%')
  26. .height(80)
  27. .fontSize(16)
  28. .borderRadius(10)
  29. .textAlign(TextAlign.Center)
  30. .backgroundColor(0xFFFFFF)
  31. }
  32. }, item => item)
  33. ListItem() {
  34. Text('Across Window Drag This')
  35. .width('80%')
  36. .height(80)
  37. .fontSize(16)
  38. .margin(30)
  39. .textAlign(TextAlign.Center)
  40. .backgroundColor(Color.Pink)
  41. .visibility(this.visible2)
  42. }
  43. }
  44. .height('50%')
  45. .width('90%')
  46. .border({ width: 1 })
  47. .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
  48. .onDragEnter((event: DragEvent, extraParams: string) => { //拖拽进去组件
  49. console.info('List onDragEnter, ' + extraParams)
  50. })
  51. .onDragMove((event: DragEvent, extraParams: string) => { //拖拽时移动
  52. console.info('List onDragMove, ' + extraParams)
  53. })
  54. .onDragLeave((event: DragEvent, extraParams: string) => { //拖拽离开组件
  55. console.info('List onDragLeave, ' + extraParams)
  56. })
  57. .onDrop((event: DragEvent, extraParams: string) => { //释放组件
  58. console.info('List onDragDrop, ' + extraParams)
  59. this.visible2 = Visibility.Visible //拖拽完成使拖入目标可见
  60. })
  61. }
  62. .width('100%')
  63. .height('100%')
  64. }
  65. }

触摸事件

当手指或手写笔在组件上触碰时,会触发不同动作所对应的事件响应,包括按下(Down)、滑动(Move)、抬起(Up)事件:

  1. onTouch(event: (event?: TouchEvent) => void)
  • event.type为TouchType.Down:表示手指按下。
  • event.type为TouchType.Up:表示手指抬起。
  • event.type为TouchType.Move:表示手指按住移动。

触摸事件可以同时多指触发,通过event参数可获取触发的手指位置、手指唯一标志、当前发生变化的手指和输入的设备源等信息。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TouchExample {
  5. @State text: string = '';
  6. @State eventType: string = '';
  7. build() {
  8. Column() {
  9. Button('Touch').height(40).width(100)
  10. .onTouch((event: TouchEvent) => {
  11. if (event.type === TouchType.Down) {
  12. this.eventType = 'Down';
  13. }
  14. if (event.type === TouchType.Up) {
  15. this.eventType = 'Up';
  16. }
  17. if (event.type === TouchType.Move) {
  18. this.eventType = 'Move';
  19. }
  20. this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
  21. + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
  22. + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
  23. + event.target.area.width + '\nheight:' + event.target.area.height
  24. })
  25. Button('Touch').height(50).width(200).margin(20)
  26. .onTouch((event: TouchEvent) => {
  27. if (event.type === TouchType.Down) {
  28. this.eventType = 'Down';
  29. }
  30. if (event.type === TouchType.Up) {
  31. this.eventType = 'Up';
  32. }
  33. if (event.type === TouchType.Move) {
  34. this.eventType = 'Move';
  35. }
  36. this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
  37. + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
  38. + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
  39. + event.target.area.width + '\nheight:' + event.target.area.height
  40. })
  41. Text(this.text)
  42. }.width('100%').padding(30)
  43. }
  44. }

页面转场动画
键鼠事件
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录
HAR

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }