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

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

您将奴隶作为主人的 child 附加的方法是导致跳转的原因。一旦 slave 被重新parented，它的 x 和 y 100 将它放在相对于它的新 parent master 的位置，而不是它相对于 mainWindow 的位置。

当你重新parent它时，你需要将slave的x和y相对于master设置为从主窗口坐标系到master坐标系的x和y平移。查看 Item::mapFromItem 和 Item::mapToItem 以了解如何在 mainWindow 的上下文中将 slave 的 x 和 y 的 100 转换为屏幕上相同的物理位置，但根据新的 parent master.

请注意，当您停止拖动并将从属parent重新parent回到主窗口时，您需要反向执行相同的操作。

这是一些代码更新的截图：

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;
        }
    }
}

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

Attach and detach a Rectangle to a moving Rectangle in QML

qt

animation

qml

qtquick2