GridLayout-ColumnLayout中的项目居中

Question

我有一个GridLayout，其中有2列。一个是Rectangle，第二个是ColumnLayout。这两个项目的位置和对齐方式都使用Layout.*。

红色区域应该是可以打开/关闭的侧边栏。右边是内容。

我遇到的问题是ColumnLayout中的项目开始于屏幕的垂直中心。如您所见，绿色的Rectangle并非从顶部开始。

我可以在绿色的anchors.top: parent.top上使用Rectangle，但是我不想混合使用Layout.*和anchors.*。

我也尝试过Layout.alignment: Qt.AlignTop的几个组件，但没有骰子。这是代码：

import QtQuick 2.7
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.0

ApplicationWindow {
    width: 400
    height: 400
    visible: true

    GridLayout {
        anchors.fill: parent
        columns: 2
        columnSpacing: 0
        rowSpacing: 0

        Rectangle {
            id: sideBar
            Layout.preferredWidth: 240
            Layout.fillHeight: true
            color: "red"
            state: "opened"

            states: [
                State {
                    name: "opened"
                    PropertyChanges { target: sideBar; Layout.preferredWidth: 240 }
                },
                State {
                    name: "closed"
                    PropertyChanges { target: sideBar; Layout.preferredWidth: 0 }
                }
            ]
        }

        ColumnLayout {
            Layout.preferredWidth: parent.width - sideBar.width
            Layout.preferredHeight: parent.height
            spacing: 0

            Rectangle {
                color: "green"
                Layout.alignment: Qt.AlignHCenter
                Layout.preferredWidth: 200
                Layout.preferredHeight: 40

            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    sideBar.state == "opened" ? sideBar.state = "closed" : sideBar.state = "opened";
                }
            }
        }
    }
}

Answer 1

更改Rectangle的对齐方式可以解决此问题：

Rectangle {
    color: "green"
    Layout.alignment: Qt.AlignTop
    Layout.preferredWidth: 200
    Layout.preferredHeight: 40

}

我也建议对边栏使用Drawer：

import QtQuick 2.7
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.0

ApplicationWindow {
    width: 400
    height: 400
    visible: true

    Drawer {
        id: sideBar
        width: 240
        height: parent.height
        background: Rectangle {
            color: "red"
        }
    }

    Rectangle {
        color: "green"
        anchors.fill: parent

        MouseArea {
            anchors.fill: parent
            onClicked: sideBar.open()
        }
    }
}