Qt/QML - SplitView behavior after manually moving handler and resizing window

Question

I am using SplitView in Qml (QtQuick.Controls 1.4), and I have divided my window in three sections. The width and height of each section is defined using percentages of the size of the full window. Example:

width: root.width * 0.33
height: root.height / 2

When I resize the Window, the different sections inside of the SplitView are resized proportionally, as shown in the following images:

• Image 1: Original size

• Image 2: After resizing

This is the expected behavior. However, if I manually move the handler of one of the sections, (I will use the vertical handler in the examples), when I resize the window that section does not resize proportionally. Instead, it keeps the size established by the handler always.

• Image 3: Example of manually moving a handler (from position in Image 1).

• Image 4: Example of resizing after manually moving a handler.

Is there a way of making it resize each section proportionally (as in example 2), after moving a handler?

Here is my code:

import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Window 2.11
import QtQuick.Layouts 1.0
import Qt.labs.qmlmodels 1.0

ApplicationWindow {
    id: root
    visible: true
    width: 600
    height: 480

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

        TableView {
            id: tableview
            width: root.width * 0.67
            height: root.height
            clip: true
        }

        Rectangle {
            id: rect
            width: childrenRect.width
            height: childrenRect.height
            SplitView {
                anchors.fill: parent
                orientation: Qt.Vertical

                TableView {
                    id: tableview2
                    width: root.width * 0.33
                    height: root.height / 2
                    clip: true
                }

                TableView {
                    id: tableview3
                    width: root.width * 0.33
                    height: root.height / 2
                    clip: true
                }
            }
        }
    }
}

My guess is that when moving the handler, the resulting size for each section turns a fixed size, and it does not uses the percentages anymore. So, is there a way of changing the values in the percentages when moving the handler, instead of setting a fixed value?

Note: I've removed the menu and the status bar in the examples for simplicity.

Note 2: I am using TableViews with a QSqlQueryModel, but I don't think it is relevant here since using Rectangles instead result in the same behaviour.

Answer 1

Its because you are loosing the binding. Try the below code

import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Window 2.11
import QtQuick.Layouts 1.0
import Qt.labs.qmlmodels 1.0

ApplicationWindow {
    id: root
    visible: true
    width: 600
    height: 480
    property var verScale: 0.67
    property var horScale: .5

onWidthChanged: tableview.width=root.width * verScale
onHeightChanged: {
    tableview2.height=root.height * horScale
    tableview3.height=root.height * (1-horScale)
}


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

    TableView {
        id: tableview
        height: root.height
        clip: true
        onWidthChanged: verScale=width/root.width
    }

    Rectangle {
        id: rect
        width: childrenRect.width
        height: childrenRect.height
        SplitView {
            anchors.fill: parent
            orientation: Qt.Vertical

            TableView {
                id: tableview2
                clip: true
                onHeightChanged: horScale=height/root.height
            }

            TableView {
                id: tableview3
                clip: true

            }
        }
    }
}
}