Help with alignment of Row{} items.

Circuits

I am having trouble figuring out how to align items that are in a row. For instance, here is a simple example with some code:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    
    Row
    {
        id: _theRow
        spacing: 5

        Rectangle
        {
            id: _theRectangle
            width: 50
            height: 50
            color: "red"
        }

        Text
        {
            id: _theTextOne
            text: "value"
        }
    }

    Text
     {
        id: _theTextTwo
        text: "unit"
     }
}

What I want to be able to do is center _theTextOne inside the _theRectangle. However, if I try to use anchors I get errors about using them within Row. If try not using Row then I have trouble with spacing _theRectangle and _theTextTwo, any suggestions?

Markkyboy

You need to nest _theTextOne inside _theRectangle, then you can use anchors, as follows;

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Row {
        id: _theRow
        spacing: 5

        Rectangle {
            id: _theRectangle
            width: 50
            height: 50
            color: "red"

            Text {
                id: _theTextOne
                 text: "value"
                 anchors.centerIn: parent
            }
        }
    }
    Text {
        id: _theTextTwo
        text: "unit"
    }
}