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?

Until you need to split the view in 3 or more and discover how lousy resizing is and implement your own split view from scratch... — dtech, Sep 30 '16 at 16:51

score 5 · Accepted Answer · answered Aug 28 '16 at 06:53

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

! That's what I get for believing the documentation. I didn't try explicit widths or heights because the docs say: _"As the fillWidth item will automatically be resized to fit the extra space, explicit assignments to width and height will be ignored (but Layout.minimumWidth and Layout.maximumWidth will still be respected)."_ — Phrogz, Aug 28 '16 at 14:20
The second part of the sentence is actually referring to the `fillWidth` item, not items in general. That documentation could be clearer. — Mitch, Aug 28 '16 at 16:16
Ah...that's a different interpretation than I had, but I can see what you're saying. — Phrogz, Aug 28 '16 at 16:18

Even initial distribution of space in a SplitView

1 Answers1