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

Posted 2023-02-16

【中文标题】将矩形附加和分离到 QML 中的移动矩形

【英文标题】：Attach and detach a Rectangle to a moving Rectangle in QML

【发布时间】：2020-05-04 12:40:19

【问题描述】：

我想在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中任意将其他物体附加到移动物体上？

【参考方案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;
        
    

【讨论】：

它工作得非常好。谢谢！与此同时，我也意识到为什么释放按钮后slave 会随着master 继续移动。如果mainWindow 是Window，则在重新设置slave 时应使用其contentItem，即slave.parent = mainWindow.contentItem。