Even initial distribution of space in a SplitView

Question

I'm writing a QML app using SplitView. I want the initial space to be evenly distributed between items, but instead one item takes all the space.

import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4

ApplicationWindow {
    id:window; visible:true
    width:500; height:300
    title:'Borked Layouts'

    SplitView {
        orientation:Qt.Horizontal
        anchors.fill:parent
        Rectangle { color:'red'
            Layout.minimumWidth:50; Layout.fillWidth:true
            Layout.preferredWidth:window.width/2
        }
        SplitView {
            orientation:Qt.Vertical
            Layout.minimumWidth:50
            Layout.preferredWidth:window.width/2
            Rectangle { color:'green'
                Layout.minimumHeight:50; Layout.fillWidth:true
            }
            Rectangle { color:'blue'
                Layout.minimumHeight:50; Layout.fillWidth:true
            }
        }
    }
}

I can drag the separators between the spaces to achieve the distribution I want, and the minimum dimensions are honored. But how can I get the initial distribution to be shared between items?

Answer 1

I've never used SplitView before, so this was a surprise to me, but after looking through bugreports.qt.io for similar issues, I saw this:

SplitView is not really a layout, so we will not support all the properties found in the attached Layout property. Just set width and height directly on the items when using SplitView.

This kinda conflicts with Layout usage in general, so I'm not sure why it's this way, but I guess there's a good reason.

So, you can achieve it like this:

import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4

ApplicationWindow {
    id: window
    visible: true
    width: 500
    height: 300

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

        Rectangle {
            color: 'red'
            width: window.width / 2
        }
        SplitView {
            orientation: Qt.Vertical
            Layout.minimumWidth: 50

            Rectangle {
                color: 'green'
                Layout.minimumHeight: 50
                Layout.fillWidth: true
            }
            Rectangle {
                color: 'blue'
                Layout.minimumHeight: 50
                Layout.fillWidth: true
            }
        }
    }
}