Home > database >  QML: Move the rectangle outside the window
QML: Move the rectangle outside the window

Time:04-30

Is it possible to move the rectangle outside the window? The only thing I came up with is to write custom logic that will resize the top window when moving the rectangle outside the window.

Current behavior (imgur .gif):

Current behavior

Desired behavior (imgur .png):

Desired behavior

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    id: root
    width: 300
    height: 500
    visible: true
    flags: Qt.ToolTip | Qt.FramelessWindowHint | Qt.WA_TranslucentBackground
    color: "#00000000"

    Rectangle {
        id: draggable
        color: "blue"
        x: 100
        y: 100
        width: 100
        height: 100

        MouseArea {
            anchors.fill: parent

            property real lastMouseX: 0
            property real lastMouseY: 0

            onPressed: {
                lastMouseX = mouseX
                lastMouseY = mouseY
            }

            onm ouseXChanged: {
                draggable.x  = (mouseX - lastMouseX)
            }

            onm ouseYChanged: {
                draggable.y  = (mouseY - lastMouseY)
            }
        }
    }

    Rectangle {
        color: "blue"
        x: 100
        y: 300
        width: 100
        height: 100

        // ...
    }
}

CodePudding user response:

Windows can be children of other Windows. The Window behavior is still subject to certain platform-dependent behavior, but on a Desktop environment child Windows should still be able to move outside the parent Window. So simply changing your Rectangle to be a Window will give you the desired effect.

Window {
    id: root

    Window {
        id: draggable
        ...
    }
}
  • Related