鸿蒙实现拖拽组件的功能

Posted 前进道路上的程序猿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鸿蒙实现拖拽组件的功能相关的知识,希望对你有一定的参考价值。

前言

对于拖拽功能,我们需要用到的是DraggedListener

准备

首先我们新建一个页面用于实现拖拽的功能
在这里插入图片描述
然后弹窗中输入页面名称
在这里插入图片描述
将页面的slice定义到MainAbility中

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(DragTextSlice.class.getName());
    }
}

最后,我们在其相应的样式文件中定义一个组件用于拖动,页面采用PositionLayout的布局格式
ability_drag_text.xml:

<?xml version="1.0" encoding="utf-8"?>
<PositionLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:darg"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#3387CEFA">
    <Text
        ohos:id="$+id:drag_text_1"
        ohos:height="50vp"
        ohos:width="200vp"
        ohos:background_element="#9987CEFA"
        ohos:position_x="100"
        ohos:position_y="20"
        ohos:text="Title"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
</PositionLayout>

然后我们在模拟器查看页面如下:
在这里插入图片描述

实现拖拽功能

首先我们需要定义point和componentPo用于保存拖拽前触屏点的位置以及模块左上角位置

    private Point point;
    private final ThreadLocal<Point> componentPo = new ThreadLocal<Point>();

然后就是获取组件以及给组件设置setDraggedListener事件了

textFirst.setDraggedListener(Component.DRAG_HORIZONTAL_VERTICAL, new Component.DraggedListener() {
            @Override
            public boolean onDragPreAccept(Component component, int dragDirection) {
                return true;
            }
            @Override
            public void onDragDown(Component component, DragInfo dragInfo) {
            }
            @Override
            public void onDragStart(Component component, DragInfo dragInfo) {
            	//获取拖拽前触摸点位置
                point = dragInfo.startPoint;
                //获取拖拽前组件在父组件中的左上角起始位置
                componentPo.set(new Point(component.getContentPositionX(), component.getContentPositionY()));
            }
            @Override
            public void onDragUpdate(Component component, DragInfo dragInfo) {
                float xOffset = dragInfo.updatePoint.getPointX() - point.getPointX();
                float yOffset = dragInfo.updatePoint.getPointY() - point.getPointY();
                //setContentPosition为组件在父组件中的位置
                component.setContentPosition(componentPo.get().getPointX() + xOffset, componentPo.get().getPointY() + yOffset);
                componentPo.set(new Point(component.getContentPositionX(), component.getContentPositionY()));
            }
            @Override
            public void onDragEnd(Component component, DragInfo dragInfo) {
            }
            @Override
            public void onDragCancel(Component component, DragInfo dragInfo) {
            }
        });

其中onDragStart方法将拖拽前触摸点的位置保存到point中;将拖拽前组件左上角位置保存到componentPo中
然后onDragUpdate中,dragInfo.updatePoint.getPointX()为拖拽后触摸点位置,所以相求X方向的便宜良则用拖拽后触摸点X坐标减去拖拽前X坐标,Y方向同理
最后使用拖拽前模块坐上角位置分别加上X和Y方向的便宜量,得到并设置拖拽后模块左上角的位置

效果如下:
拖拽前:
在这里插入图片描述
拖拽后
在这里插入图片描述
更多技术交流请加入QQ群
群名称:华为鸿蒙harmonyos开发
群 号:1164091073

以上是关于鸿蒙实现拖拽组件的功能的主要内容,如果未能解决你的问题,请参考以下文章

简单拖拽即生成网页 VvvebJs

鸿蒙HarMonyOS的UI组件学习七之图片轮播

鸿蒙第三方组件——SwipeCaptcha滑动拼图验证组件

模拟实际项目需求,使用element的日历组件配合h5的拖拽功能实现任务拖拽保存

HarmonyOS鸿蒙学习笔记Navigator组件实现页面路由跳转

HarmonyOS鸿蒙学习笔记Navigator组件实现页面路由跳转