qml using Row to align components in the center

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.

Check `RowLayout`. It looks like `Row` but has more layout options. — Benjamin T, Nov 01 '17 at 13:00
@BenjaminT Tried that as well but could not get them to align components as I would like. — user42140, Nov 01 '17 at 13:11
Ok, you are trying to place your Row to fill the parent (`anchors.fill: parent`) and at the same time to center in inside the parent (`anchors.horizontalCenter: parent.horizontalCenter`). That just doesn't work together. Just remove `anchors.fill: parent` if you want to put Row item in the center of its parent. Also you should set height of the Row. I guess it should be `height: parent.height`. Also I guess you should set width of your `ToolButton`s — folibis, Nov 01 '17 at 13:39
@folibis Do you want to write it as an answer so that I can accept it? It worked perfectly. Sorry cannot upvote your comment due to my low street cred. — user42140, Nov 01 '17 at 15:08

score 1 · Answer 1 · answered Sep 30 '20 at 15:30

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

score 0 · Answer 2 · answered Apr 29 '20 at 02:10

0

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.

answered Apr 29 '20 at 02:10

dobey

164
4

score 0 · Answer 3 · answered Aug 14 '20 at 09:55

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

qml using Row to align components in the center

3 Answers3