How to treat screen orientation in QML?

Question

I usually develop focused to vertical orientation, but when I turn the device screen to horizontal, the elements are resized in an unwanted way, leaving some smaller than they really should be.

For example:

Rectangle
{
    id: foo
    width: parent.width * 0.8;
    height: parent.height * 0.025;
}

In a 1024 x 600 device, when vertical foo is 25px high, but when horizontal is 15px, which compromises the reading of possible texts within the Rectangle.

It is possible to set a minimum size for when horizontal?
And how best to address screen orientation issues in QML?

Answer 1

You can deduce the screen orientation by the ratio width/height. An example:

Item {
    id: root
    property int isVertical: width/height < 1

    Text {
        text: root.isVertical ? "Vertical" : "Horizontal"
        anchors.centerIn: parent
    }
}

But making use of a conditional so can make the layout not change fluidly when someone resize the window (on desktop). If the focus is just fixed screen size devices, you don’t have to worry so much about it.

Anyway the best is to build the layout to adapt to the screen size, whatever it is. After all you can have a vertical that is much smaller than expected and the text will be unreadable in the same way. Set a minimum size!

Item {
    id: root

    Rectangle {
        anchors.centerIn: parent
        color: "green"
        width: parent.width * 0.8
        height: Math.max(parent.height / 6, 25)
    }
}

So any text inside the rectangle will always be readable.