ApplicationWindow and header overdraw

Question

I wonder why I get this result

As you can see, the Header is above the rectangle. When I check everything, I got toolBar.parent === rect.parent. So the parent is common at both. Since the parent is the same, when I do anchors.top: parent.top, I must not get something like anchors.top: toolBar.bottom.

Here is my full code :

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;
        }
    }
}

I must use the topMargin: -toolBar.height to solve the problem, but I wonder why I get this result since the parent are the same.

Answer 1

The documentation shows the layout:

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

The parent is the same, but the contentItem is positioned below the header, so anchoring rect to the top of it won't do what you want.

To fix it, add this to your Rectangle:

topMargin: -mainWindow.header.height