QML 中元素的大小

Question

我是 QML 新手。 据我了解，所有元素都有关联的宽度和高度，这决定了它们的大小。 如果用户更改屏幕分辨率，最终输出看起来很奇怪。 有没有一种方法可以根据屏幕分辨率动态控制元素的大小？

Answer 1

您可以将根元素的 height 和 width 乘以因数，而不是使用固定值，从而确定与根元素大小成比例的元素大小。此外，您还可以使用QML 锚点。有了这个，您可以创建完全可扩展的 GUI：

import QtQuick 1.0

Item {
    id: root

    // default size, but scalable by user
    height: 300; width: 400

    Rectangle {
        id: leftPanel

        anchors {
            top: parent.top
            left: parent.left
            bottom: parent.bottom
        }
        width: root.width * 0.3
        color: "blue"
    }

    Rectangle {
        id: topPanel

        anchors {
            top: parent.top
            left: leftPanel.right
            right: parent.right
        }
        height: root.height * 0.2
        color: "green"
    }


    Rectangle {
        id: contentArea

        anchors {
            top: topPanel.bottom
            left: leftPanel.right
            right: parent.right
            bottom: root.bottom
        }
        color: "white"

        Text {
            text: "Hi, I'm scalable!"
            anchors.centerIn: parent
            font.pixelSize: root.width * 0.05
        }
    }
}

我不知道如何使用在所有环境下都可用的纯 QML 来获取屏幕分辨率。

要确定移动设备上的屏幕分辨率，您可以使用 QML 屏幕元素。

在桌面应用程序中，您可以使用 C++ 获取屏幕分辨率（例如使用 QDesktopWidget）并将其设置为 以 QML 形式提供。