qmlqtquick2pyqt6splitview

How to implement QML SplitView for three or more elements


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.
enter image description here

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

enter image description here

Looks like first two sections width are squeezed to 0

Any ideas?


Solution

  • 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]