ApplicationWindow и заголовок overdraw

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