[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: 480property 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!