使鼠标悬停的 SplitView 手柄更宽

问题描述

从 qml 自定义 SplitView 示例中，我们可以看到句柄是 Rectangle，其隐式宽度为 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"
    }
}

我的宠物项目我将其设置为 2，但现在很难调整 SplitView 的大小，因为鼠标悬停区域太小。我不想让它本身变大，但只想增加鼠标悬停区域。我尝试了一些，但没有成功。可能吗？

解决方法

这是一个不幸的限制，由于一系列社区贡献，它将在 6.2 中修复。然后解决方案是使用 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 使用根句柄项来确定可触摸区域，但是如果您尝试使用普通 Item 来增加该区域，则会影响句柄的视觉大小，这通常是不可取的：

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

注意不应该出现的大片白色区域：