Search code examples
qtqmlgrid-layoutqtquick2qgridlayout

How to put a rectangle in a particular row and column in GridLayout of QML?

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1  // GridLayout

Window
{
    visible: true

    height: 700; width: 1000

    GridLayout
    {
        id: gridLayout
        rows: 15;
        columns: 15;
        rowSpacing: 0;    columnSpacing: 0

        property int secondScreenOptionsOpacity: 0

        property int hmmiButtonRow: 0
        property int hmmiButtonCol: 0

        Rectangle
        {
            id: hmmi;
            Layout.row: gridLayout.hmmiButtonRow; Layout.column: gridLayout.hmmiButtonCol;
            height: 70; width: 150; color: "pink";
            Layout.alignment: Qt.AlignTop
            Text { text: "HMMI"; anchors.centerIn: parent }
            MouseArea {anchors.fill: parent; onClicked: mainScreenFunctionality.hmmiControlButton()}
        }

        property int optionsButtonRow: 1
        property int optionsButtonCol: 0

        Rectangle
        {
            id: optionsButton;
            Layout.row: gridLayout.optionsButtonRow; Layout.column: gridLayout.optionsButtonCol;
            height: 70; width: 150; color: "red"
            Layout.alignment: Qt.AlignBottom
            Text { text: "Options..."; anchors.centerIn: parent }
            MouseArea { anchors.fill: parent; onClicked: mainScreenFunctionality.optionsButton() }
        }

        property int eulerWidgetRow: 1
        property int eulerWidgetCol: 11

        Rectangle
        {
            id: eulerWidgetControl;
            Layout.row :gridLayout.eulerWidgetRow; Layout.column: gridLayout.eulerWidgetCol;
            height: 140; width: 140; color: "yellow"
            Layout.columnSpan: 2; Layout.rowSpan: 2
            Layout.alignment: Qt.AlignRight
            Text { text: "euler"; anchors.centerIn: parent }
        }
    }
}

Even though I have specified row 1 and column 11, see where the yellow rectangle is shown:

There has to be empty space between the red and yellow rectangles.
How to put a rectangle in a particular row and column in GridLayout of QML?

enter image description here

Heading ##

Adding anchors.fill: parent to GridLayout does the following:

enter image description here

Solution

  • There has to be empty space between the red and yellow rectangles.

    Only if the width of columns between the red and yellow rectangles is greater than zero. In your code column 1 ~ 10 are not specified, so their width are all zero. That's why the empty spaces (columns) do not show up. To solve the problem, you can add some invisible columns to the GridLayout like this:

    GridLayout {
    //your code ...

    Repeater {
        model: 9
        delegate: Item {
            width: 10; height: 10
            Layout.row: 1
            Layout.column: index + 1
    }
}

    Adding anchors.fill: parent to GridLayout shows empty spaces between the rectangles, that's one of the most powerful features in GridLayout: dynamically arranging items in a grid. If we change the invisible columns to black rectangles: 

    GridLayout {
    //your code...

    Repeater {
        model: 9
        delegate: Rectangle {
            width: 10; height: 10
            Layout.row: 1
            Layout.column: index + 1
            color: "black"
    }
}

    You can clearly see that when the width of the GridLayout changed (for example, drag the border of the window), the spacing between rectangles changes automatically.GridLayout