如何將QML滑塊的mouseArea限制爲僅限手柄？

我想實現一個使用QtQuick.Controls Slider其中只有handle是可以點擊的，可以用來拖handle。如果你點擊groove，什麼都不應該發生，handle應該保持它的位置。我怎樣才能限制Slider的mouseArea到只有handle？如何將QML滑塊的mouseArea限制爲僅限手柄？

在下面的例子中，Slider是可點擊的整個Sliderwidth和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 
      } 
     } 
    } 
}

我想到了在「.. \ QML \ QtQuick \控制」文件夾改變Slider.qml模板，但我真的不知道該怎麼做。

我所有的搜索努力白費。任何幫助將不勝感激。

來源

2015-09-23 Simon

我可能是錯的，但我認爲這有悖於滑塊的所有桌面平臺上的行爲，這是值得考慮的可用性原因。這且不說，讓我們嘗試：

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

接着，移動至onPressed手柄的if (handleHovered)條件內的手柄位置更新。

  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-23 17:41:07 Mitch

謝謝你的回答@Mitch。它還沒有按照我的要求工作，但它是正確的方向。直到下週三才能開始工作。當時會報告。 – Simon

抱歉，我花了很長時間才找回來。再次感謝您的回答！相反，我們與輸入完全不同的手段去滑的，所以我沒有對我仍然有問題的工作。 – Simon

如何將QML滑塊的mouseArea限制爲僅限手柄？

回答

相關問題