1

我想实现一个Slider使用 QtQuick.Controls 的地方，其中只有handle是可点击的并且可以用来拖动handle. 如果单击groove，则不会发生任何事情，handle应该保持原位。我怎样才能将 的 限制为mouseArea唯一的？Sliderhandle

在下面的示例中Slider，整个都是可点击的，Slider width并且height：

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3

Window {
    id: mainItem
    width: 800
    height: 400
    visible: true

    Slider{
        id: autoSlider
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        maximumValue: 1.0
        value: 0
        updateValueWhileDragging : false

        style: SliderStyle {
            groove: Rectangle {
                implicitWidth: 350
                implicitHeight: 8
                color: "gray"
                radius: 8
            }
            handle: Rectangle {
                anchors.centerIn: parent
                color: control.pressed ? "white" : "lightgray"
                border.color: "gray"
                border.width: 2
                implicitWidth: 45
                implicitHeight: 45
                radius: 12
            }
        }
    }
}

我想过更改Slider.qml“..\qml\QtQuick\Controls”文件夹中的模板，但我真的不知道该怎么做。

我所有的搜索努力都没有结果。任何帮助将不胜感激。

4

1 回答 1

1

我可能是错的，但我认为这违背了所有桌面平台上滑块的行为，这是出于可用性原因需要考虑的问题。除此之外，让我们尝试：

diff --git a/src/controls/Slider.qml b/src/controls/Slider.qml
index 20d1102..da6f051 100644
--- a/src/controls/Slider.qml
+++ b/src/controls/Slider.qml
@@ -258,7 +258,7 @@ Control {
         }

         onPositionChanged: {
-            if (pressed)
+            if (pressed && handleHovered)
                 updateHandlePosition(mouse, preventStealing)

当手柄没有悬停时，我们不希望手柄位置发生变化，因为这意味着鼠标在手柄之外。

             var point = mouseArea.mapToItem(fakeHandle, mouse.x, mouse.y)
@@ -272,18 +272,21 @@ Control {
             if (handleHovered) {
                 var point = mouseArea.mapToItem(fakeHandle, mouse.x, mouse.y)
                 clickOffset = __horizontal ? fakeHandle.width/2 - point.x : fakeHandle.height/2 - point.y
+
+                pressX = mouse.x
+                pressY = mouse.y
+                updateHandlePosition(mouse, !Settings.hasTouchScreen)
             }
-            pressX = mouse.x
-            pressY = mouse.y
-            updateHandlePosition(mouse, !Settings.hasTouchScreen)
         }

if (handleHovered)接下来，在手柄的条件下移动手柄位置更新onPressed。

         onReleased: {
-            updateHandlePosition(mouse, Settings.hasTouchScreen)
-            // If we don't update while dragging, this is the only
-            // moment that the range is updated.
-            if (!slider.updateValueWhileDragging)
-                range.position = __horizontal ? fakeHandle.x : fakeHandle.y;
+            if (handleHovered) {
+                updateHandlePosition(mouse, Settings.hasTouchScreen)
+                // If we don't update while dragging, this is the only
+                // moment that the range is updated.
+                if (!slider.updateValueWhileDragging)
+                    range.position = __horizontal ? fakeHandle.x : fakeHandle.y;
+            }
             clickOffset = 0
             preventStealing = false
         }

最后，对处理程序进行类似的更改onReleased。

这会让你得到你想要的，尽管边缘有点粗糙 - 从字面上看。我认为互动不是100％，而是尝试一下。通过更多的实验，你应该能够让它完美地工作。

另一个 hacky 选项是修改Slider.qml为在滑块本身上方MouseArea具有手柄的任一侧。这些中的每一个都将填充手柄两侧的可用空间，有效地窃取凹槽将接收到的所有鼠标事件。

于 2015-09-23T17:41:07.460 回答