Component appearance problem in QML apps

qcoderpro

Hello,

An important concept for apps is density independence. Which means, no matter how big the device is physically, and no matter what the display resolution is, any item should have the same physical size on every device. A button on a small phone should have the same size on a bigger phone or tablet. Same for the height of list items for example.

So what is the method you QML programmers use to give size to components so that they look the same, smaller on smaller screens and bigger on bigger screens?

ODБOï

@qcoderpro hi
https://doc.qt.io/qt-5/scalability.html

qcoderpro

@lelev

Thank you. I read that but still it's not clear for me. Please consider the example below:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

ApplicationWindow {
    visible: true
    width: 800; height: 600
    title: qsTr("Hello World")

    Rectangle {
      width: 100
      height: 80
      anchors.centerIn: parent
      color: "green"
    }
}

When I run it on different devices with different screen sizes, the result is weird!

I want this:
On devices with smaller screens => the size of components smaller
On devices with bigger screens => the size of components bigger

I think all mobile applications are behaving that way. Aren't they?

IntruderExcluder

This can be useful too: https://doc.qt.io/qt-5/highdpi.html

jsulm

@qcoderpro Do you use layouts?
https://doc.qt.io/qt-5/layout.html

J.Hilk

hi @qcoderpro you have more or less 2 options.

Using layouts like @jsulm said, they do exist also for QML components
https://doc.qt.io/qt-5/qtquicklayouts-index.html

or instead of fix x, y w, h you use relative positions:

ApplicationWindow {
    visible: true
    width: 800; height: 600
    title: qsTr("Hello World")

    Rectangle {
      width: parent.width / 8
      height: parent.height * 2 / 15
      anchors.centerIn: parent
      color: "green"
    }
}

qcoderpro

@j-hilk
Thank you. Yes, it was also recommended by @LeLev. Very good, thanks.