Qt 如何在QML的GridLayout中的特定行和列中放置矩形？

即使我已经指定了第1行和第11列，请参见显示黄色矩形的位置：

---

红色和黄色矩形之间必须有空白。
如何在QML的GridLayout中的特定行和列中放置矩形？

---

标题## 添加

anchors.fill:parent

到GridLayout会执行以下操作：

---

红色和黄色矩形之间必须有空白

仅当红色和黄色矩形之间的列宽度大于零时。在您的代码中，没有指定列1~10，因此它们的宽度都为零。这就是为什么没有显示空的空格（列）。要解决此问题，可以向

GridLayout

添加一些不可见的列，如下所示：

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

---

添加

anchors.fill:parent

到

GridLayout

会显示矩形之间的空白，这是：在网格中动态排列项目中最强大的功能之一。如果我们将不可见列更改为黑色矩形：

GridLayout {
    //your code ...

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

您可以清楚地看到，当

GridLayout

的宽度改变时（例如，拖动窗口的边框），矩形之间的间距会自动改变

GridLayout {
    //your code...

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