将矩形附加和分离到 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"
}

目前我已经尝试将slave连接和分离到master：

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

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

问题是，如果主机已经在移动，按下按钮将从机跳转到它从一开始就与主机一起移动的位置，然后即使在按钮之后继续与主机一起移动被释放了。

如何在qmlqml中任意将其他物体附加到移动物体上？

Answer 1

您将奴隶附加为主人的孩子的方法是导致跳跃的原因。一旦从属节点重新设置父节点，它的 x 和 y 值 100 就会将其放置在与新父节点 master 相关的位置，而不是与 mainWindow 相关的位置。

当你重新设置它时，你需要将slave的x和y相对于master设置为x和y从mainWindow坐标系到master坐标系的平移。查看Item::mapFromItem 和Item::mapToItem 以了解如何将mainWindow 上下文中从属设备的x 和y 100 转换为屏幕上相同的物理位置，但对于新父级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;
        }
    }
}