Congratulations to our 2022 Qt Champions!

Building QML Applications resolution independent

  • Hi everyone. can someone point me to some examples of building an QML application resolution independent. can you provide the size(width,height) in percentage?


  • You can always calculate the width and hight for each item, for example:
    Rectangle {
    width: parent.width * 0.7
    height: parent.height * 0.4

    Is this what you mean?

  • I'm looking for something like a space separator, because I'm also interested in elements location. I need to maintain some elements with original sizes , but I want some elements to be enlarged only on horizontal or vertical. something similar to qt native widgets, but in QML.

  • Maybe extensive use of anchoring will help you? It will be easier to say if you will provide some mockup of what you need.

  • Indeed, probably anchor layouts is what you want. If you want, as you said, components to be enlarged only on vertical, you can write, for instance:

    Item {
    id: rootItem

    Rectangle {
         id: anchoredRectangle
        anchors.topMargin: 17
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter // or, for example: anchors.right: parent.right


    This way the Rectangle will be enlarged only on vertical axis when Item is enlarged.

    Is something like this what you want?

Log in to reply