Forcing desired space between two rectangles in GridLayout

**TheIndependentAquarius** · 2nd May 2016, 08:36

Qt Code:

Switch view

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 }
            }
        }
    }

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 }
            }
        }
    }

To copy to clipboard, switch view to plain text mode

----------

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?

Screenshot from 2016-05-02 12:03:56.jpg

----------

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

----------

32.jpg

**anda_skoa** · 2nd May 2016, 12:12

There is no content in any of the columns between the 0 and 11, so these columns have width 0.

If you need those columns to have a certain width, add an appropriately sized Item into any row.

Cheers,
_