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