How to implement QML SplitView for three or more elements

Question

I'm trying to user PyQt6 to build Desktop app. I need to build a UI presentation with three logical sections which can be resizable by horizontal axis. Looks like SplitView is a perfect component for my goal. Unfortunately I can't make it works as desired.

I found a simple example in official documentation for Qt version 5 that describes exact UI result I'm looking for.

So I decided to reuse the code under Qt version 6

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts

ApplicationWindow {
    height: 600
    visible: true
    width: 1200

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

        Rectangle {
            Layout.maximumWidth: 400
            color: "lightblue"
            width: 200

            Text {
                anchors.centerIn: parent
                text: "View 1"
            }
        }
        Rectangle {
            id: centerItem

            Layout.fillWidth: true
            Layout.minimumWidth: 50
            color: "lightgray"

            Text {
                anchors.centerIn: parent
                text: "View 2"
            }
        }
        Rectangle {
            color: "lightgreen"
            width: 200

            Text {
                anchors.centerIn: parent
                text: "View 3"
            }
        }
    }
}

But I get a different result

Looks like first two sections width are squeezed to 0

Any ideas?

Answer 1

To use SplitView effectively, you should get a handle of the SplitView attached properties such as SplitView.preferredWidth, SplitView.fillWidth and SplitView.fillHeight. All other sizing such as width, Layout.fillWidth should be removed, e.g.

import QtQuick
import QtQuick.Controls
Page {
    title: "SplitView Demo"
    SplitView {
        anchors.fill: parent
        orientation: Qt.Horizontal
        Rectangle {
            SplitView.preferredWidth: 200
            SplitView.fillHeight: true
            color: "lightblue"
            Text {
                anchors.centerIn: parent
                text: "View 1"
            }
        }
        Rectangle {
            id: centerItem
            SplitView.preferredWidth: 200
            SplitView.fillHeight: true
            color: "lightgray"
            Text {
                anchors.centerIn: parent
                text: "View 2"
            }
        }
        Rectangle {
            SplitView.fillWidth: true
            SplitView.fillHeight: true
            color: "lightgreen"
            Text {
                anchors.centerIn: parent
                text: "View 3"
            }
        }
    }
}

You can Try it Online!

[EDIT: Oh, I see that @eyllanesc effectively had this answer 7 hours ago]