GridLayout - Items inside ColumnLayout are centered

Question

I have a GridLayout with 2 columns. One is a Rectangle, the second is a ColumnLayout. Both items make use of Layout.* for their positions and alignment.

The red area is supposed to be a sidebar that you can open/close. The right side is content.

The problem I'm experiencing is that Items in the ColumnLayout start in the vertical center of the screen. As you can see, the green Rectangle is not starting from the top.

I can use a anchors.top: parent.top on the green Rectangle but I rather not want to mix Layout.* and anchors.*.

I've also tried Layout.alignment: Qt.AlignTop on several components but no dice. Here's the code:

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

Changing the alignment of the Rectangle fixes it:

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

}

I would also recommend using Drawer for the sidebar:

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