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 } }
            }
        }
    }
}

Albertino80 Albertino80 · Accepted Answer · 2021-03-18T08:50:38

Add this to MouseArea:

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

QML SplitView auto collapse on handlebar mouse release

1 Answers