Question

如果我正在旋转不同高度和宽度的矩形，我该如何制作它以使窗口符合这些尺寸？

我有一个根矩形（窗口本身），其中包含QML中的一些其他矩形，我希望它可以从纵向旋转到横向，但是当前旋转到横向时，窗口保持相同的大小，而图像和内容窗口旋转和在纵向模式下可见的部分内容丢失超出窗口的边框，因为窗口不会调整大小以反映旋转。

在示例代码中，绿色矩形lostone在窗口边框之外丢失，如果用户想再次看到绿色矩形，则必须手动调整窗口大小或旋转回垂直方向。我希望窗口使用background矩形

调整大小

示例：

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

仅使用QML无法实现您的目标。

为了更改窗口的尺寸，您需要从QML向本机主窗口对象发送信号，然后在信号处理程序中重新调整大小。

主窗口对象可以在main.cpp文件中找到。

Answer 2

您对“root”一词的使用有点令人困惑。 Qt Quick场景中的根项通常是窗口本身。我猜你的意思是Rectangle是根项目的孩子？无论如何，最好计算出你期望的最大尺寸：

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

但是，如果矩形的大小在运行时发生变化，这将调整窗口大小，因此最好使用固定大小：

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

或者，只是估计：

width: 500

QML在纵向和横向之间旋转

2 个答案: