CODEWITHSUNDEEP
qtqmlqt-quickqtquickcontrols
user42140
user42140

Reputation: 257

qml using Row to align components in the center

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.

Upvotes: 9

Views: 22959

Answers (3)

piper2200s
piper2200s

Reputation: 277

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

Upvotes: 1

Maxim Skvortsov
Maxim Skvortsov

Reputation: 435

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

Upvotes: 0

dobey
dobey

Reputation: 174

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.

Upvotes: 1

Related Questions