QML rotating between portrait and landscape

Question

If I am rotating a rectangle with different height and width, how do I make it so that the window it is in conforms to those dimensions?

I have a root rectangle (the window itself) which contains some other rectangles in QML and I want it to be rotatable from portrait to landscape but currently when rotating to landscape the window stays the same size while the image and contents of the window rotate and part of what was visible in portrait mode is lost beyond the borders of the window because the window does not resize to reflect the rotation.

In the Example code, the green rectangle lostone is lost beyond the border of the window and the user has to manually resize the window or rotate back to vertical if they want to see the green rectangle again. I want the window to resize with the background rectangle

Example:

import QtQuick 2.0

Rectangle {
    id: screen
    width: 400
    height: 500
    state: "vertical"
    rotation: 0

    Rectangle {
        id: background
        width: 400
        height: 500
        anchors.centerIn: parent
        color: "blue"

        Rectangle {
            id: lostone
            width: 50
            height: 50
            color: "green"
            anchors.top: parent.top
        }

        Rectangle {
            id: rotater
            anchors.centerIn: parent
            width: 150
            height: 50
            color: "red"
            anchors.horizontalCenterOffset: 0
            smooth: true
            anchors.horizontalCenter: parent.horizontalCenter

            MouseArea {
                anchors.fill: parent
                onClicked: screen.toggle()
            }
        }

    }

    Behavior on width {
        NumberAnimation { duration: 100 }
    }

    Behavior on height {
        NumberAnimation { duration: 100 }
    }

    Behavior on rotation {
        NumberAnimation { duration: 100 }
    }

    function toggle() {
        console.log("toggle called, screen state is " + screen.state)
        if (screen.state=="vertical") {screen.state = "rotated"; } else { screen.state ="vertical"}
    }

    states: [
        State {
            name: "rotated"
            PropertyChanges {
                target: screen; rotation: -90; width: 400; height: 500

            }
        },
        State {
            name: "vertical"
            PropertyChanges {
                target: screen; rotation: 0; width: 400; height: 500
            }

        }

    ]
}

Answer 1

What you are trying to do is not possible using only QML .

In order to change the dimension of the window you need to send out a signal from QML to your native main window object and then re-size it in the signal handler .

The main window object can be found in your main.cpp file .

Answer 2

Your use of the word "root" is a bit confusing. A root item in a Qt Quick scene is generally the window itself. I'm guessing you mean a Rectangle that is a child of the root item? In any case, it's best to calculate the largest size that you're expecting:

import QtQuick 2.2

Rectangle {
    id: root
    width: Math.sqrt((rect.width * rect.width) + (rect.height * rect.height))
    height: width

    Rectangle {
        id: rect
        width: 400
        height: 200
        anchors.centerIn: parent

        gradient: Gradient {
            GradientStop {
                position: 0
                color: "red"
            }
            GradientStop {
                position: 1
                color: "orange"
            }
        }

        RotationAnimation {
            target: rect
            property: "rotation"
            from: 0
            to: 360
            running: true
            duration: 5000
            loops: Animation.Infinite
        }
    }
}

However, this will resize the window if the size of the rectangle changes at runtime, so it's better to use a fixed size:

width: Math.sqrt(400 * 400 + 200 * 200)

Or, just estimate:

width: 500