SplitViewExample

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    RowLayout {
        anchors.fill: parent

        Rectangle {
            id: sidebar

            Layout.preferredWidth: 200
            Layout.fillHeight: true

            color: "red"
        }

        SplitView {
            id: splitView
            Layout.fillWidth: true
            Layout.fillHeight: true

            orientation: Qt.Vertical

            property real topSplitterRectHeightRatio: 0.5
            property real bottomSplitterRectHeightRatio: 0.5

            Rectangle {
                id: topSplitterRect

                SplitView.fillWidth: true
                SplitView.preferredHeight: splitView.availableHeight * splitView.topSplitterRectHeightRatio

                color: "yellow"
            }

            Rectangle {
                id: bottomSplitterRect

                SplitView.fillWidth: true
                SplitView.preferredHeight: splitView.availableHeight * splitView.bottomSplitterRectHeightRatio

                color: "blue"
            }

            onResizingChanged: {
                if(!resizing) {
                    splitView.topSplitterRectHeightRatio = topSplitterRect.height / splitView.availableHeight
                    splitView.bottomSplitterRectHeightRatio = bottomSplitterRect.height / splitView.availableHeight
                }
            }
        }
    }
}