2024年HarmonyOS鸿蒙最新鸿蒙HarmonyOS实战-ArkUI事件（触屏事件）_arkui自定义触摸控件，阿里面试风波

本文链接：https://blog.csdn.net/2401_84871893/article/details/138833657

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

拖出窗体

import image from ‘@ohos.multimedia.image’;

@Entry
@Component
struct Index {
@State visible: Visibility = Visibility.Visible
private pixelMapReader = undefined

aboutToAppear() {
console.info('begin to create pixmap has info message: ')
this.createPixelMap()
}

createPixelMap() {
let color = new ArrayBuffer(4 * 96 * 96);
var buffer = new Uint8Array(color);
for (var i = 0; i < buffer.length; i++) {
buffer[i] = (i + 1) % 255;
}
let opts = {
alphaType: 0,
editable: true,
pixelFormat: 4,
scaleMode: 1,
size: { height: 96, width: 96 }
}
const promise = image.createPixelMap(color, opts);
promise.then((data) => {
console.info('create pixmap has info message: ’ + JSON.stringify(data))
this.pixelMapReader = data;
})
}

@Builder pixelMapBuilder() {
Text(‘drag item’)
.width(‘100%’)
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(‘App1’)
.width(‘40%’)
.height(80)
.fontSize(20)
.margin(30)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Pink)
.visibility(Visibility.Visible)

Text(‘Across Window Drag This’)
.width(‘80%’)
.height(80)
.fontSize(16)
.margin(30)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Pink)
.visibility(this.visible)
.onDragStart(() => { //启动跨窗口拖拽
console.info(‘Text onDrag start’)
return { pixelMap: this.pixelMapReader, extraInfo: ‘custom extra info.’ }
})
.onDrop((event: DragEvent, extraParams: string) => {
console.info('Text onDragDrop, ')
this.visible = Visibility.None //拖动结束后，使源不可见
})
}

.width(‘100%’)
.height(‘100%’)
}
}

拖入窗体

@Entry
@Component
struct Index {
@State number: string[] = [‘drag here’]
@State text: string = ‘’
@State bool1: boolean = false
@State bool2: boolean = false
@State visible: Visibility = Visibility.Visible
@State visible2: Visibility = Visibility.None
scroller: Scroller = new Scroller()

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(‘App2’)
.width(‘40%’)
.height(80)
.fontSize(20)
.margin(30)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Pink)
.visibility(Visibility.Visible)

List({ space: 20, initialIndex: 0 }) {
ForEach(this.number, (item) => {
ListItem() {
Text(‘’ + item)
.width(‘100%’)
.height(80)
.fontSize(16)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor(0xFFFFFF)
}
}, item => item)

ListItem() {
Text(‘Across Window Drag This’)
.width(‘80%’)
.height(80)
.fontSize(16)
.margin(30)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Pink)
.visibility(this.visible2)
}
}
.height(‘50%’)
.width(‘90%’)
.border({ width: 1 })
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
.onDragEnter((event: DragEvent, extraParams: string) => { //拖拽进去组件
console.info('List onDragEnter, ’ + extraParams)
})
.onDragMove((event: DragEvent, extraParams: string) => { //拖拽时移动
console.info('List onDragMove, ’ + extraParams)
})
.onDragLeave((event: DragEvent, extraParams: string) => { //拖拽离开组件
console.info('List onDragLeave, ’ + extraParams)
})
.onDrop((event: DragEvent, extraParams: string) => { //释放组件
console.info('List onDragDrop, ’ + extraParams)
this.visible2 = Visibility.Visible //拖拽完成使拖入目标可见
})
}
.width(‘100%’)
.height(‘100%’)
}
}

因为不好演示就不截图了

3.触摸事件

触摸事件是一种用户与触摸屏或触摸设备进行交互的方式。当用户通过手指或手写笔触摸屏幕或其他触摸设备时，设备会检测到并触发相应的事件。触摸事件可以包括触摸开始、触摸移动、触摸结束、触摸取消等不同的操作状态。

触摸事件常用于移动设备，例如智能手机、平板电脑等。通过触摸屏幕，用户可以进行滑动、点击、缩放等操作，实现与设备的交互。

在软件开发中，可以通过监听触摸事件，来响应用户的触摸操作。开发者可以根据触摸事件的不同状态，执行相应的操作，例如在用户滑动屏幕时进行页面切换，或者在用户点击屏幕时进行按钮点击等。触摸事件的处理可以通过各种编程语言和开发框架来实现。

接口如下：

onTouch(event: (event?: TouchEvent) => void)

event.type为TouchType.Down：表示手指按下。
event.type为TouchType.Up：表示手指抬起。
event.type为TouchType.Move：表示手指按住移动。

案例如下：

// 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: ’