Qt QML-GridLayout-无法使用它将页面居中

我对Qt和QML还不熟悉，当我试图学习它们时，我遇到了以下问题，我不知道它们为什么会出现

我有一个按钮，当我按下时，屏幕上将显示一个新的紫色矩形。我试着把它放在屏幕的中心，或者换言之，填满整个屏幕，但由于某种原因，我做不到，它总是从第2项开始，而不是从屏幕开始。此外，它将被放置在项目1和项目3下，以覆盖它们

我的代码：

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.12

Window {
    id: mainD
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    GridLayout {
        id : grid
        anchors.fill: parent
        rows    : 12
        columns : 20
        property double colMulti : grid.width / grid.columns
        property double rowMulti : grid.height / grid.rows
        function prefWidth(item){
            return colMulti * item.Layout.columnSpan
        }
        function prefHeight(item){
            return rowMulti * item.Layout.rowSpan
        }
        Rectangle {
            id: id1
            color : 'red'
            Layout.column: 0
            Layout.rowSpan: 10
            Layout.columnSpan: 2
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
        }
        Rectangle {
            id: id2
            color : 'green'
            Layout.column: 2
            Layout.rowSpan: 10
            Layout.columnSpan: 18
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
            Button{
                width: 100
                height: 100
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                onClicked: {
                    id2.state = "STATE_1"
                }
            }

            StackView{
                id: st
                width: parent.width
                height: parent.height + 100
                
                anchors.horizontalCenter: grid.parent.horizontalCenter
                anchors.verticalCenter: grid.parent.verticalCenter

                visible: false
                Rectangle{
                    anchors.fill: parent
                    color: "purple"
                    opacity: 0.7
                    Button{
                        width: 100
                        height: 100
                        onClicked: {
                            id2.state = "STATE_2"
                        }
                    }
                }
            }

            states: [
                State{
                    name: "STATE_1"
                    PropertyChanges {
                        target: st;
                        visible: true
                    }
                },
                State{
                    name: "STATE_2"
                    PropertyChanges {
                        target: st;
                        visible: false
                    }
                }
            ]
        }
        Rectangle {
            id: id3
            color : 'blue'
            Layout.column: 18
            Layout.rowSpan: 10
            Layout.columnSpan: 2
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
        }
    }
}

---

有人能解释一下我做错了什么吗？

紫色矩形是StackView对象的初始项，id为“st”。它最初是隐藏的。 “id2”是“st”的视觉父级。“st”的坐标相对于其视觉父对象。将其宽度设置为其父对象的宽度，将其高度设置为父对象的高度+100，以便其（0,0）坐标变为父对象的（0,0）。您应该阅读文档中的更多内容：

如果您想用紫色矩形填充整个屏幕，并将其放置在其他视觉项目的顶部，您可以通过将“st”从“网格”中移出，并将其放置在与之相同的标高上来实现。现在“grid”和“st”都是“mainD”的子对象，因为StackView位于“grid”之下，所以您不需要玩z值，但当“st”变为可见时，它将呈现在“grid”之上

我建议进一步阅读免费书籍中的

定位元素

章节

我有一个按钮，当我按下时，屏幕上将显示一个新的紫色矩形。我试着把它放在屏幕中央，或者换言之，填满整个屏幕

正如@talamaki所提到的，如果您希望紫色填充整个背景，最好将其作为主项的子项，而不是将其作为网格的一部分，然后让其扩展网格内分配的空间

但出于某种原因，我不能这样做，而且它总是会开始的 从第2项开始，而不是从屏幕开始

这是因为网格是如何工作的。把它想象成一个棋盘，项目1已经占据了前两列，因此项目2将从第三列开始，项目2的任何子项都从项目2的坐标系开始。你可以让它扩展到它的起点之外，但是我认为在根项目上有背景会更干净

另外，它将被放在第1项和第3项下，而不是 覆盖它们

要使紫色位于1和3下方，必须首先绘制紫色（在QML中应排在第一位）。如果不希望按钮受到影响，则应将其放在QML文件的GridLayout下面，以便最后在其上绘制。把所有这些放在一起会是这样的：

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.12

Window {
    id: mainD
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
        
    Rectangle{
        id: background
        anchors.fill: parent
        color: "purple"
        opacity: 0.7
        visible: false
    }

    GridLayout {
        id : grid
        anchors.fill: parent
        rows    : 12
        columns : 20
        property double colMulti : grid.width / grid.columns
        property double rowMulti : grid.height / grid.rows
        function prefWidth(item){
            return colMulti * item.Layout.columnSpan
        }
        function prefHeight(item){
            return rowMulti * item.Layout.rowSpan
        }
        
        Rectangle {
            id: id1
            color : 'red'
            Layout.column: 0
            Layout.rowSpan: 10
            Layout.columnSpan: 2
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
        }
        Rectangle {
            id: id2
            color : 'green'
            Layout.column: 2
            Layout.rowSpan: 10
            Layout.columnSpan: 16
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
        }
        Rectangle {
            id: id3
            color : 'blue'
            Layout.column: 18
            Layout.rowSpan: 10
            Layout.columnSpan: 2
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
        }
    }

    Button{
        width: 100
        height: 100
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        onClicked: {
            background.visible = !background.visible
        }
    }
}

从您的问题来看，我不清楚您是否希望项目2消失，使其颜色与背景混合，或在单击按钮时使其保持在顶部

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.12

Window {
    id: mainD
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
        
    Rectangle{
        id: background
        anchors.fill: parent
        color: "purple"
        opacity: 0.7
        visible: false
    }

    GridLayout {
        id : grid
        anchors.fill: parent
        rows    : 12
        columns : 20
        property double colMulti : grid.width / grid.columns
        property double rowMulti : grid.height / grid.rows
        function prefWidth(item){
            return colMulti * item.Layout.columnSpan
        }
        function prefHeight(item){
            return rowMulti * item.Layout.rowSpan
        }
        
        Rectangle {
            id: id1
            color : 'red'
            Layout.column: 0
            Layout.rowSpan: 10
            Layout.columnSpan: 2
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
        }
        Rectangle {
            id: id2
            color : 'green'
            Layout.column: 2
            Layout.rowSpan: 10
            Layout.columnSpan: 16
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
        }
        Rectangle {
            id: id3
            color : 'blue'
            Layout.column: 18
            Layout.rowSpan: 10
            Layout.columnSpan: 2
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
        }
    }

    Button{
        width: 100
        height: 100
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        onClicked: {
            background.visible = !background.visible
        }
    }
}