ApplicationWindow和标头覆盖

Question

我想知道为什么会得到这个结果

如您所见，标题位于矩形上方。 检查所有内容后，我得到了toolBar.parent === rect.parent。所以父母在这两者上是共同的。由于父母是相同的，所以当我做anchors.top: parent.top时，我一定不会得到类似anchors.top: toolBar.bottom的东西。

这是我的完整代码：

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
import "EasyWidget"

ApplicationWindow {
    id: mainWindow;
    visible: true;
    width: 480;
    height: 640;
    title: qsTr("Easy Music Video");

    header: ApplicationToolBar {
        id: toolBar;
        width: mainWindow.width;
        height: mainWindow.height / 8;
        title: qsTr("Music");
        onClicked: console.log("clicked");
    }

    Rectangle {
        z: 1;
        id:rect;
        color: Material.color(Material.BlueGrey);
        width: mainWindow.width / 3;

        anchors {
            bottom: parent.bottom;
            top: parent.top;
            left: parent.left;
            //topMargin: -toolBar.height;
        }
    }
}

我必须使用topMargin: -toolBar.height来解决问题，但是我想知道为什么我得到这个结果，因为父母是相同的...

Answer 1

文档显示了布局：

https://doc.qt.io/qt-5/qml-qtquick-controls2-applicationwindow.html#details

父级是相同的，但是contentItem位于header下方，因此将rect锚定到其顶部不会满足您的要求。

要修复此问题，请将其添加到您的Rectangle：

topMargin: -mainWindow.header.height