[SOLVED] RowLayout.spacing isn't working when RowLayout.anchors.fill = parent



  • I'm trying to make a ToolBar with ToolButtons on the left side and a Text label on the right side. The spacing between ToolButtons must be equal to 4.
    When RowLayout width is set equal to Window width (via anchors or width properties) then ToolButtons are distributed along a RowLayout and spacing between them are not equal to 4.

    Is there any property that handles the behavior of RowLayout items? (A kind of alignment within a container)

    @
    ApplicationWindow {
    width: 640
    height: 480

    property real dip: Screen.pixelDensity * 25.4 / 160     // Device Independent Pixel (1 px at 160 DPI)
    property real tbWidth: Math.round(48 * dip)             // ToolButton width
    property real tbHeight: Math.round(48* dip)             // ToolButton height
    
    toolBar: ToolBar {
        id: tb1
        RowLayout {
            id: tbRow1
            anchors.fill: parent
            spacing: 4
            ToolButton {
                id: tbBtn1
                implicitWidth: tbWidth
                implicitHeight: tbHeight
                Image {
                    anchors.fill: parent
                    source: "qrc:///images/icon1.svg"
                    sourceSize.width: tbWidth
                    sourceSize.height: tbHeight
                    fillMode: Image.Pad
                }
            }
            ToolButton {
                id: tbBtn2
                implicitWidth: tbWidth
                implicitHeight: tbHeight
                Image {
                    anchors.fill: parent
                    source: "qrc:///images/icon2.svg"
                    sourceSize.width: tbWidth
                    sourceSize.height: tbHeight
                    fillMode: Image.Pad
                }
            }
            Text {
                id: text1
                text: "t1"
                anchors.right: parent.right
                font.pixelSize: 12
            }
        }
    }
    

    }
    @



  • You simply need to create a spacer item. If there are no expanding spacer items in your layout, it will distribute equal size to all of them. Since you want to keep your tool buttons from growing (it is not the spacing that is the issue it is the fact that buttons are stretched) You need to add an expanding item to your layout. You can do it by adding this
    @
    Item { Layout.fillWidth: true ; height: 1 }
    @
    Between the last tool button and the text label



  • Cool!
    I added anchors.left and leftMargin for each button.
    Your method is much shorter.

    Thanks!


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.