GridLayout - ColumnLayout 内的项目居中

Question

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

红色区域应该是您可以open/close的侧边栏。右边是内容

我遇到的问题是 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()
        }
    }
}

GridLayout - ColumnLayout 内的项目居中

GridLayout - Items inside ColumnLayout are centered

qt

qml

qt-quick

qtquick2