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?
implicitHeight : real. Defines the natural width or height of the Item if no width or height is specified. The default implicit size for most items is 0x0, however some elements have an inherent implicit size which cannot be overridden, e.g. Image, Text.
QML is the language; its JavaScript runtime is the custom V4 engine, since Qt 5.2; and Qt Quick is the 2D scene graph and the UI framework based on it. These are all part of the Qt Declarative module, while the technology is no longer called Qt Declarative.
Now QML gives you chance to change the stacking order through z property of the item. in the above example if I assign z property of the red rectangle to have a value of anything above 0, I would see it on top of blue rectangle. So z property has changed the stacking order for the sibling item.
In syntactic terms, a QML object type is one which can be used to declare an object by specifying the type name followed by a set of curly braces that encompasses the attributes of that object. This differs from value types, which cannot be used in the same way.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With