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