鸿蒙实现拖拽组件的功能

前言

对于拖拽功能，我们需要用到的是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