Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/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
            anchors.top: contentBg.top
            
            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:

    unscaled.PNG
    ...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:

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

    Thanks...



  • 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