Make SplitView handle wider for mouse hover

Question

From qml Customizing SplitView example we can see handle is Rectangle with implicitWidth 4

SplitView
{
    id: splitView
    anchors.fill: parent
    handle: Rectangle {
        implicitWidth: 4
        implicitHeight: 4
        color: SplitHandle.pressed ? "#81e889"
            : (SplitHandle.hovered ? Qt.lighter("#c2f4c6", 1.1) : "#c2f4c6")
    }
    Rectangle {
        implicitWidth: 150
        color: "#444"
    }
    Rectangle {
        implicitWidth: 50
        color: "#666"
    }
}

I my pet project I set it to 2, but now it's difficult to resize SplitView because mouse hover area is too tight. I don't want to make it bigger itself, but would like to increase only mouse hover area. I gave some tries, but without success. Is it possible?

Answer 1

This is an unfortunate limitation that will be fixed in 6.2 thanks to a series of community contributions. The solution will then be to use a containmentMask:

https://codereview.qt-project.org/gitweb?p=qt/qtquickcontrols2.git;f=src/quickcontrols2/doc/snippets/qtquickcontrols2-splitview-handle-containmentmask.qml;hb=refs/changes/18/359318/1#l40

SplitView uses the root handle item to determine the touchable area, but if you try to use a plain Item to increase that area, it will affect the visual size of the handle, which is typically not desirable:

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    width: 640
    height: 480
    visible: true

    SplitView {
        anchors.fill: parent

        handle: Item {
            implicitWidth: 32

            Rectangle {
                implicitWidth: 4
                anchors.horizontalCenter: parent.horizontalCenter
                height: parent.height

                color: SplitHandle.pressed ? "#81e889"
                    : (SplitHandle.hovered ? Qt.lighter("#c2f4c6", 1.1) : "#c2f4c6")
            }
        }

        Rectangle {
            implicitWidth: 150
            color: "#444"
        }
        Rectangle {
            implicitWidth: 50
            color: "#666"
        }
    }
}

Notice the large white area which shouldn't be there: