Question

I am new to QML.
As I understand, all elements have an associated width and height which determines their size.
If the user changes screen resolution, the final output looks weird.
Is there a way the size of elements could be controlled dynamically based on screen resolution?

Answer 1

Instead of using fixed values, you can multiply height and width of the root element by factors, that determine the size of your elements proportional to the root elements size. Additionally you can use QML anchors. With this you can create completely scalable GUIs:

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

I dont know a way to get the screen resolution with pure QML that is available at all environments.

To determine the screen resolution on mobile devices you can use the QML Screen Element.

In desktop applications you can get the screen resolution in C++ (e.g. with QDesktopWidget) and make it available in QML.