qml using Row to align components in the center - qt

Question

I am using Row to layout some buttons on a Rectangle which is my custom toolbar implementation. The problem is no matter what I do, the components are always aligned from the left. I would like them to be aligned with the center of the row and flowing outwards towards the edges. The code looks as follows:
Rectangle {
id: toolbar
color: "green"
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
height: 100
Row
{
anchors.fill: parent
anchors.horizontalCenter: parent.horizontalCenter
spacing: 60
ToolButton {
height: parent.height
Image {
anchors.verticalCenter: parent.verticalCenter
source: "../images/image.png"
}
}
ToolButton {
height: parent.height
Image {
anchors.verticalCenter: parent.verticalCenter
source: "../images/image.png"
}
}
}
}
My buttons are always laid out starting from the left side of the row. Rather I would like to have them laid out relative to the center of the toolbar. I thought specifying this line anchors.horizontalCenter: parent.horizontalCenter should achieve that but no matter what I try, the components are laid out from the left boundary.

Answer 1

If you set your Row's alignments to center in the parent object and then make the Row's width adjust to the childrenRect's width then you can have items expand from the center of the object. Note: you may need to set the widths of the ToolButton's in order for the childrenRect to have it's width value populated.
Rectangle {
id: toolbar
color: "green"
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
height: 100
Row
{
anchors{
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
height: parent.height
width: childrenRect.width
spacing: 60
ToolButton {
height: parent.height
width: 50
Image {
anchors.verticalCenter: parent.verticalCenter
source: "../images/image.png"
}
}
ToolButton {
height: parent.height
width: 50
Image {
anchors.verticalCenter: parent.verticalCenter
source: "../images/image.png"
}
}
}
}

Answer 2

You've set anchors.fill: parent on the Row so it will of course fill its parent. Instead, you should remove this, and only set height: parent.height on the Row.

Answer 3

Documentation citation:
since a Row automatically positions its children horizontally, a child item within a Row should not set its x position or horizontally anchor itself using the left, right, anchors.horizontalCenter, fill or centerIn anchors. If you need to perform these actions, consider positioning the items without the use of a Row.
Row is only for positioning it`s children horizontally. Without any 'flows' or centering. It is for automatic positioning in a row which let you exclude defines of anchors and margins inside item when you need to perform that simple task.
But if you need something more complicated, you need to do it with anchors and margins manually. For example. Centering items and spreading them from center to the edges might look like this:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: toolbar
color: "green"
anchors.centerIn: parent
height: 100
width: parent.width
Rectangle {
id: toolbutton1
height: parent.height
anchors {
right: toolbutton2.left
margins: 20
}
width: 100
color: "blue"
}
Rectangle {
id: toolbutton2
height: parent.height
anchors {
right: parent.horizontalCenter
margins: 10
}
width: 100
color: "magenta"
}
Rectangle {
id: toolbutton3
height: parent.height
anchors {
left: parent.horizontalCenter
margins: 10
}
width: 100
color: "red"
}
Rectangle {
id: toolbutton4
height: parent.height
anchors {
left: toolbutton3.right
margins: 20
}
width: 100
color: "yellow"
}
}
}