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

Dmitry.Sokolov

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
        }
    }
}

}
@

Jens

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

Dmitry.Sokolov

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

Thanks!