QML SplitView auto collapse on handlebar mouse release

Question

I have a QML Controls 2 SplitView and a redefined handle, which works well, but I want detect mouse release event on the handler, so I could collapse the SplitView under a certain threshold of width. Adding a MouseArea on top of the existing handle will absorb drag events, so I'm unable to move the handlebar. Any idea how could I gather the mouse release event, or any other solution which solves this problem?

Alright, I have created an example application. As you can see in this example, my MouseArea is marked with yellow and collapses the right view programmatically when double clicked, which is nice, but I also want to drag the handlebar and upon mouse release under a certain width threshold I want to collapse the view as well. The black part of the handlebar where my MouseArea is not covering the handlebar, responds to drag, but since there is no signal I can gather from it, the width threshold already set shouldCollapse boolean property, so the view won't update. Probably I could solve this issue with a timer, but I need a more sophisticated solution.

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 800
    height: 400
    visible: true

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

        function toggleCollapse() { collapsibleRect.shouldCollapse = !collapsibleRect.shouldCollapse }

        handle: Rectangle {
            implicitWidth: 20
            implicitHeight: 20
            color: "black"

            MouseArea {
                anchors.centerIn: parent
                width: parent.width
                height: parent.height / 2
                onDoubleClicked: splitView.toggleCollapse()
                Rectangle {
                    anchors.fill: parent
                    color: "yellow"
                    Text {
                        anchors.centerIn: parent
                        text: "Double click to collapse"
                        rotation: 90
                    }
                }
            }
        }

        Rectangle {
            id: mainRect
            color: "green"
            SplitView.fillWidth: true
            Text {
                anchors.centerIn: parent
                font.pixelSize: 24
                text: "Main scene"
            }
        }

        Rectangle {
            id: collapsibleRect
            property bool shouldCollapse: false
            SplitView.preferredWidth: shouldCollapse ? 0 : 300
            color: "purple"
            clip: true
            onWidthChanged: {
                if(width < 200) shouldCollapse = true
                else shouldCollapse = false
            }
            Text {
                anchors.centerIn: parent
                rotation: parent.shouldCollapse ? 90 : 0
                font.pixelSize: 24
                text: parent.shouldCollapse ? "SHOULD BE COLLAPSED" : "NOT COLLAPSED"
                Behavior on rotation { NumberAnimation { duration: 100 } }
            }
        }
    }
}

Answer 1

I had a similar problem and was able to solve it thanks to the hint of @Ponzifex that the SplitView's resizing property will be set to true as soon as the handle is clicked. Using a Timer I managed to detect whether the handle was quickly pressed twice in a row.

SplitView {
    id: view
    ...
    handle: Rectangle {
        ...
    }
    //============================================================
    // double click behavior
    Timer {
        id: doubleClickTimer

        interval: 300 // number of ms between clicks that should be considered a double click
    }

    property bool doubleClicked: false

    // `resizing` will be set to true even if the handle is just pressed
    onResizingChanged: {
        if (view.resizing) {
            if (!doubleClickTimer.running) {
                doubleClickTimer.start();
                return;
            }
            view.doubleClicked = true;
        } else {
            if (view.doubleClicked) {
                // do any manual resizing in here
                view.doubleClicked = false;
            }
        }
    }
}

It is important to note, however, that it is only possible to resize the contents of a SplitView when resizing is false. That's why I need to have the doubleClicked helper property.

Answer 2

Add this to MouseArea:

onPressed: {
    mouse.accepted = (mouse.flags & Qt.MouseEventCreatedDoubleClick);
}
propagateComposedEvents: true
cursorShape: Qt.SplitHCursor