Important: Please read the Qt Code of Conduct -

using scaling within ColumnLayouts

  • Hi all -

    I have a QML screen that uses a column layout:

        ColumnLayout {
            spacing: root.gridSpacing
            anchors.horizontalCenter: parent.horizontalCenter
            Label { ... }
            Rectangle {
                height: 197
                width: 326
                transform: Scale {xScale: 2.0; yScale: 2.0}
                Layout.alignment: Qt.AlignHCenter }
            ConsumableCancelDoneRow { ... }

    If I omit the scaling, my display looks like this:

    ...which is essentially correct, except I want the rectangle to be larger. But...I don't want to just make it larger; its size is given to me, along with 16 other rectangles that will fit into this one, and I'd rather not re-calculate all of them manually.

    When I use the transform: Scale directive above, my display looks like this:

    Is there a better way to resize this rectangle without undoing my other settings?


  • I've worked around this issue with this hack:

    Rectangle {
      property var scaleFactor: 1.5
      id: rack
      height: 197 * scaleFactor
      width: 495 * scaleFactor
      Bottle {
        id: bottle1
        cellX: 25
        cellY: 105
        cellHeight: 75
        cellWidth: 75
        bottleScaleFactor: scaleFactor

    The Bottle.qml does the same thing with its factor as does the rack.

    This fixes the problem, but I'd still be interested in hearing about more elegant solutions.

Log in to reply