HarmonyOS 鸿蒙Next 一个控件要识别滑动和拖动怎么写组合手势 滑动怎么判断方向
HarmonyOS 鸿蒙Next 一个控件要识别滑动和拖动怎么写组合手势 滑动怎么判断方向
拖动的参考demo如下:
// xxx.ets
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
[@State](/user/State) offsetX: number = 0;
[@State](/user/State) offsetY: number = 0;
[@State](/user/State) count: number = 0;
[@State](/user/State) positionX: number = 0;
[@State](/user/State) positionY: number = 0;
[@State](/user/State) borderStyles: BorderStyle = BorderStyle.Solid
build() {
Column() {
Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
.fontSize(28)
}
// 绑定translate属性可以实现组件的位置移动
.translate({ x: this.offsetX, y: this.offsetY, z: 0 })
.height(250)
.width(300)
//以下组合手势为顺序识别,当长按手势事件未正常触发时不会触发拖动手势事件
.gesture(
// 声明该组合手势的类型为Sequence类型
GestureGroup(GestureMode.Sequence,
// 该组合手势第一个触发的手势为长按手势,且长按手势可多次响应
LongPressGesture({ repeat: true })
// 当长按手势识别成功,增加Text组件上显示的count次数
.onAction((event: GestureEvent|undefined) => {
if(event){
if (event.repeat) {
this.count++;
}
}
console.info('LongPress onAction');
})
.onActionEnd(() => {
console.info('LongPress end');
}),
// 当长按之后进行拖动,PanGesture手势被触发
PanGesture()
.onActionStart(() => {
this.borderStyles = BorderStyle.Dashed;
console.info('pan start');
})
// 当该手势被触发时,根据回调获得拖动的距离,修改该组件的位移距离从而实现组件的移动
.onActionUpdate((event: GestureEvent|undefined) => {
if(event){
this.offsetX = this.positionX + event.offsetX;
this.offsetY = this.positionY + event.offsetY;
}
console.info('pan update');
})
.onActionEnd(() => {
this.positionX = this.offsetX;
this.positionY = this.offsetY;
this.borderStyles = BorderStyle.Solid;
})
)
)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
priorityGesture(带优先级的手势绑定方法)去分别判断拖动和滑动的时机,参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-gesture-settings-V13#绑定手势识别
PanGesture,拖动手势事件,当滑动的最小距离超过设定的最小值时触发拖动手势事件,他是有个滑动的最小距离的,参考文档:PanGesture-手势处理-组件通用信息-ArkTS组件-ArkUI(方舟UI框架)-应用框架 - 华为HarmonyOS开发者 (huawei.com)
目前没有这样的案例, PanGesture有参数distance为用于指定触发拖动手势事件的最小拖动距离,单位为vp。
更多关于HarmonyOS 鸿蒙Next 一个控件要识别滑动和拖动怎么写组合手势 滑动怎么判断方向的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next系统中,要为一个控件同时识别滑动和拖动(即组合手势),可以利用GestureDetector
组件。GestureDetector
支持多种手势的识别,包括滑动和拖动。
对于滑动方向的判断,可以在onFling
回调方法中进行处理。onFling
方法会传递四个参数:e1
(第一个事件的坐标)、e2
(第二个事件的坐标)、velocityX
(X轴上的速度)、velocityY
(Y轴上的速度)。通过比较e1
和e2
的坐标,可以判断滑动的方向。例如,如果e2.getX() - e1.getX()
的值大于某个阈值且Math.abs(e2.getY() - e1.getY())
小于该阈值,则可以判定为水平向右滑动;反之,如果e1.getX() - e2.getX()
的值大于阈值,则为水平向左滑动。同理,可以判断垂直方向的滑动。
拖动(长按并移动)则可以通过onScroll
回调方法进行处理,该方法会在用户拖动时持续被调用。
在实际开发中,可以通过设置GestureDetector
的监听器来同时处理这两种手势,并在相应的回调方法中实现具体逻辑。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html