Solved Component appearance problem in QML apps
-
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?
-
-
@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?
-
This can be useful too: https://doc.qt.io/qt-5/highdpi.html
-
@qcoderpro Do you use layouts?
https://doc.qt.io/qt-5/layout.html -
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.htmlor 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" } }
-
@j-hilk
Thank you. Yes, it was also recommended by @LeLev. Very good, thanks.