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

Question

boolean is501 = false;
boolean is520 = false;
boolean is601 = false;

//You need to define is501 this outside of for loop

if(plotNo.equals("501") || plotNo.equals("520") || plotNo.equals("601"){
   if (!is501 && plotNo.equals("501")) {
     //Your logic
     is501 = true;
   }
   else if (!is520 && plotNo.equals("520")) {
     //Your logic
     is520 = true;
   }
   else if (!is520 && plotNo.equals("601")) {
     //Your logic
     is601 = true;
   }
}

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

必须红色和黄色矩形之间的空白区域 如何在QML的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 } } } } 添加到GridLayout会执行以下操作：

Answer 1

  

必须红色和黄色矩形之间的空白区域。

仅当红色和黄色矩形之间的列宽度大于零时。在您的代码中，未指定1~10列，因此它们的宽度均为零。这就是为什么空格（列）不会出现的原因。要解决此问题，您可以向GridLayout添加一些不可见的列，如下所示：

GridLayout {
    //your code ...

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

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

GridLayout {
    //your code...

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

您可以清楚地看到，当GridLayout的宽度发生变化时（例如，拖动窗口的边框），矩形之间的间距会自动更改。