0

newbee here on QML. I am trying to do something very basic but I can't get it to work properly.

Basically I want to centralize a RowLayout inside a parent rectangle, but the anchors are only working vertically.

What I want is this:

enter image description here

but this is what I am getting:

enter image description here

the code:

Rectangle
{
    height: implicitHeight
    width: implicitWidth
    color : "cornflowerblue"

    Text {
        text: "C"
        font.family: "Helvetica"
        font.pointSize: 12
        color: "black"
    }

    RowLayout
    {
        anchors.fill: parent

        Rectangle {
            width: 60
            height: 100
            color: "red"
            border.color: "black"
            border.width: 5
            radius: 10
        }

        Rectangle {
            width: 60
            height: 100
            color: "red"
            border.color: "black"
            border.width: 5
            radius: 10
        }

        Rectangle {
            width: 60
            height: 100
            color: "red"
            border.color: "black"
            border.width: 5
            radius: 10
        }

        Rectangle {
            width: 100
            height: 100
            color: "red"
            border.color: "black"
            border.width: 5
            radius: 10
        }

    }

}

I looked into this thread and somewhat helped, but I still don't get the proper horizontal alignment.

Following the suggestion of the comments, I used anchors.centerIn: parent

However now the spacing between rectangles was squashed. Is there an easy way to space the rectangles without adding extra items in between them?

enter image description here

How do I center text horizontally and vertically in a TextView?

gmmo
  • 2,577
  • 3
  • 30
  • 56
  • 1
    For your `RowLayout`, perhaps try using `anchors.centerIn: parent` rather than `anchors.fill: parent`. I'm not sure offhand if the children will layout as expected, but it may achieve what you're looking for. – dabbler Sep 01 '22 at 20:44
  • that helped but how do I increase the space in between the rectangles? See my edits – gmmo Sep 01 '22 at 22:08
  • 1
    Use `RowLayout`'s `spacing` property to set the spacing between `Items` in the layout: https://doc.qt.io/qt-6/qml-qtquick-layouts-rowlayout.html#spacing-prop – dabbler Sep 01 '22 at 23:01
  • worked well, thank you! – gmmo Sep 02 '22 at 01:07

1 Answers1

0

solution, thanks to dabbler

RowLayout
{
    anchors.centerIn: parent
    spacing: 20

    Rectangle {
        width: 60
        height: 100
        color: "red"
        border.color: "black"
        border.width: 2
        radius: 10
    }

etc...

gmmo
  • 2,577
  • 3
  • 30
  • 56