QML WindowApplication weird sizing behavior with SplitView when setting the window toolbar

Question

I'm stuck with this basic problem in QML. I must say that even if I already worked with Qt, I'm a QML newbie.

I define a vertical SplitView in an ApplicationWindow, and I try to set the height of the bottom view to a percentage of the window height. This works fine as long as I don't set the window toolbar. When I do so, the bottom height is just zero.

After trying some workarounds, I managed to show it by adding an extra value that must be higher than the percentage multiplied by the toolbar height (46 pixels on my screen).

This is really weird to me and not obvious at all. It looks like QML doesn't recompute the height of the bottom view if it's to zero a initialization, but does it well if it's higher than zero at initialization (it works even with 0.01 pixels...).

My code :

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

ApplicationWindow {
    id: mainWindow
    width: 640; height:480

    toolBar: ToolBar {}

    SplitView {
        orientation: Qt.Vertical
        anchors.fill: parent

        Component.onCompleted: { print("Split view: " + width + "x" + height) }
        onHeightChanged: print("Split view: " + width + "x" + height)

        Rectangle {
            Layout.fillHeight: true
            Text {
                text: "Top"
                anchors.centerIn: parent
            }
        }

        Rectangle {
            height: 0.1 * parent.height
            Text {
                text: "Bottom"
                anchors.centerIn: parent
            }

            Component.onCompleted: { print("Bottom: " + width + "x" + height + " (parent " + parent.height + ")") }
            onHeightChanged: print("Bottom: " + width + "x" + height + " (parent " + parent.height + ")")
        }
    }

}

Thanks if anyone has an idea to write this the proper way (if it's not a Qt bug...).

Answer 1

It seems that it is a bug, a workaround is not to use anchors but a simple calculation:

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

ApplicationWindow {
    id: mainWindow
    width: 640; height:480
    visible: true

    toolBar: ToolBar {
        id: toolbar
    }

    SplitView {
        height: mainWindow.height - toolBar.height // <----
        width: mainWindow.width // <----

        orientation: Qt.Vertical
        Rectangle {
            Layout.fillHeight: true
            Text {
                text: "Top"
                anchors.centerIn: parent
            }
        }
        Rectangle {
            height: 0.1 * parent.height
            Text {
                text: "Bottom"
                anchors.centerIn: parent
            }
        }
    }
}