qt - QMLのGridLayoutで特定の行と列に長方形を配置する方法は?

Question

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

---

行 1 と列 11 を指定しましたが、黄色の四角形が表示されている場所を確認してください。

---

赤と黄色の四角形の間には空白が必要です。
QMLのGridLayoutで特定の行と列に長方形を配置する方法は?

---

見出し ##

anchors.fill: parentGridLayout に追加すると、次のことが行われます。

---