Using margins combined with layouts

qwasder85

Hey all,
I have a UI that features Layouts nested in Layouts (i.e. a RowLayout somewhere within a ColumnLayout, filling width and height).
It would be great if I could use margins alongside, but it doesn't seem to have any effect if I don't use anchors to place the elements.
Is there a little workaround for that or do I have to choose one technique?

Following is a little example. How would I go about setting margins for one of the nested Layouts in there?

ColumnLayout
{
    anchors.fill: parent

    spacing: 0

    Rectangle
    {
        Layout.fillWidth: true

        color: "darkblue"
        height: 35
    }

    RowLayout
    {
        Layout.fillWidth: true
        Layout.fillHeight: true

        spacing: 5

        ColumnLayout
        {
            id: centerLeftColumnLayout

            Layout.fillWidth: true
            Layout.fillHeight: true

            Rectangle
            {
                Layout.fillWidth: true

                color: "yellowgreen"
                height: 30
            }

            Rectangle
            {
                id: signalTiles

                Layout.fillWidth: true
                Layout.fillHeight: true

                color: "lightblue"
            }

            Rectangle
            {
                Layout.fillWidth: true

                color: "green"
                height: 50
            }
        }

        ColumnLayout
        {
            Layout.fillWidth: true
            Layout.fillHeight: true

            spacing: 0

            Rectangle
            {
                Layout.fillWidth: true

                color: "red"
                height: 30
            }

            Rectangle
            {
                Layout.fillWidth: true
                Layout.fillHeight: true

                color: "blue"
            }
        }
    }

    Rectangle
    {
        Layout.fillWidth: true

        color: "orange"
        height: 40
    }
}

Manfred

Hi,

I solved this kind of problem by wrapping the items to be laid out into rectangles.
This way you can use the anchors margin properties inside the rectangle as you wish and the layout is done for the rectangles.

Hope this helps!
cheers,
Manfred

qwasder85

@Manfred That was my first intention, but it makes the code harder to read.

Manfred

You could put the content of the outer rectangles inside a component.
This way the code would be hidden away in a separate qml file.

cheers
Manfred