QML GridLayout how to position elements

Question

I would like to position elements in a grid layout like in picture 1 and picture 2.

Picture 1

Picture 2

I have already tried various examples but I can't get the positioning right. It only seems to work if I fill all cells with dummy content. But even that only works to a limited extent.

Since I have several of these use cases I would like to realise the cell content via a component in this form:

       GridLayout { anchors.fill: parent; rows: 4; columns: 4
            GridContent { height: 50; width: 50; p_column: 0; p_row: 2; p_image: "warning" }
            GridContent { height: 50; width: 50; p_column: 0; p_row: 3; p_image: "info.png" }
            GridContent { height: 50; width: 50; p_column: 1; p_row: 2; p_colspan: 2; p_rowspan: 2; p_text: "This is a text over 2 columns and 2 rows" }
         }

Is this possible in any form or is a different layout more appropriate?

Answer 1

With GridLayout, as the items will be arranged according to the flow and layoutDirection properties, you can't set only the main items, you have to define also the blank items.

In my example below, I have defined the different parts of the grid by using rowSpan and columnSpan to fill blank spaces with "filler" items. Next, you can easily display your items inside the other areas.

But maybe it is not the best Layout for your problem. You could try a combo of Column/Row or ColumnLayout/RowLayout, as suggested in the comments.

GridLayout {
    anchors.fill: parent
    rows: 4
    columns: 4
    flow: GridLayout.TopToBottom
    rowSpacing: 0
    columnSpacing: 0

    property int cellWidth: width / rows
    property int cellHeight: height / columns

    // Filler
    Rectangle {
        Layout.rowSpan: 2
        Layout.columnSpan: 4
        Layout.preferredWidth: parent.cellWidth * Layout.columnSpan
        Layout.preferredHeight: parent.cellHeight * Layout.rowSpan
        border.color: "orange"
        border.width: 1
    }

    // Icon Top
    Rectangle {
        Layout.preferredWidth: parent.cellWidth * Layout.columnSpan
        Layout.preferredHeight: parent.cellHeight * Layout.rowSpan
        border.color: "orange"
        border.width: 1

        Image {
            anchors.centerIn: parent
            source: "warning"
        }
    }

    // Icon Bottom
    Rectangle {
        Layout.preferredWidth: parent.cellWidth * Layout.columnSpan
        Layout.preferredHeight: parent.cellHeight * Layout.rowSpan
        border.color: "orange"
        border.width: 1

        Image {
            anchors.centerIn: parent
            source: "info.png"
        }
    }

    // Text Area
    Rectangle {
        Layout.rowSpan: 2
        Layout.columnSpan: 2
        Layout.preferredWidth: parent.cellWidth * Layout.columnSpan
        Layout.preferredHeight: parent.cellHeight * Layout.rowSpan
        border.color: "orange"
        border.width: 1

        Text {
            anchors.centerIn: parent
            text: "This is a text over 2 columns and 2 rows"
        }
    }

    // Filler
    Rectangle {
        Layout.rowSpan: 2
        Layout.columnSpan: 1
        Layout.preferredWidth: parent.cellWidth * Layout.columnSpan
        Layout.preferredHeight: parent.cellHeight * Layout.rowSpan
        border.color: "orange"
        border.width: 1
    }
}