在QML中将矩形附加和分离到移动的矩形

Question

我想在qml中实现，只要我按住一个按钮，两个矩形就会一起移动，但是一旦我松开它，其中一个矩形就会停留在松开时的位置。

让移动的Rectangle成为主控者，其代码如下：

Rectangle {
    id: master
    x: 10
    y: 10
    width: 50
    height: 50
    color: "#00ff00"

    Behavior on x {
        NumberAnimation {
            duration: 2000
        }
    }
}

只要按下按钮，就应该随主机一起移动的从机的代码如下：

Rectangle {
    id: slave
    x: 100
    y: 100
    width: 50
    height: 50
    color: "#ff0000"
}

目前，我已经尝试了以下操作，以将从属服务器连接到主服务器上：

ToggleButton {
    id: attach
    x: 300
    y: 300
    text: qsTr("Attach")

    onClicked: {
        if (checked) {
            slave.parent = master
        } else {
            slave.parent = mainWindow
        }
    }
}

问题是，如果主控制器已经在移动，则按下按钮会将从属设备跳转到如果它从一开始就与主设备一起移动的位置，然后即使在按钮被按下后仍继续与主设备一起移动。已发布。

如何将其他对象随意附加到移动的对象上，然后在qml中分离它们？

Answer 1

当您重新设置它的父级时，需要将相对于母版的从属的x和y设置为x和y从mainWindow的坐标系到母版的坐标系的转换。查看Item::mapFromItem和Item::mapToItem，以了解如何将mainWindow上下文中从站的x和y转换为屏幕上相同的物理位置，但以新的父级master表示。

注意，停止拖动并将从属重新回到主窗口时，您将需要做相反的事情。

这里是一些代码更新的镜头：

ToggleButton {
    id: attach
    x: 300
    y: 300
    text: qsTr("Attach")

    onClicked: {
        if (checked) {
            var newPoint = mainWindow.contentItem.mapToItem(master, slave.x, slave.y);
            slave.parent = master;
            slave.x = newPoint.x;
            slave.y = newPoint.y;
        } else {
            var newPoint = master.mapToItem(mainWindow.contentItem, slave.x, slave.y);
            slave.parent = mainWindow.contentItem;
            slave.x = newPoint.x;
            slave.y = newPoint.y;
        }
    }
}