拖动RangeSlider的范围

时间:2018-12-11 06:50:39

标签: qt qml qtquick2 qtquickcontrols2 rangeslider

在我的用于查看带有图表的日志文件的Qt项目中,我需要一个范围滑块以方便在时间轴上导航。

我需要的是支持拖动两个手柄;在两个手柄之间单击并拖动时,两个手柄会一起移动。 RangeSlider的行为是将最接近的手柄定位到被单击的位置,我找不到从任何属性更改此手柄的任何方法。

当提供的控件未提供所需的功能时,我想知道唯一的方法是从头开始创建新组件,还是有任何方法可以自定义现有控件?

1 个答案:

答案 0 :(得分:2)

您想要的肯定可以实现:

RangeSlider {
    id: sli
    width: 300
    from: 0
    to: 1000
    first.value: 300
    second.value: 700
    Rectangle {
      anchors.left: sli.first.handle.right
      anchors.right: sli.second.handle.left
      anchors.verticalCenter: sli.verticalCenter
      height: sli.first.handle.height
      color: "red"
      MouseArea {
        anchors.fill: parent
        property real dx: 0
        onPressed: dx = mouseX
        onPositionChanged: {
          var d = ((mouseX - dx) / sli.width) * Math.abs(sli.to - sli.from)
          if ((d + sli.first.value) < sli.from) d = sli.from - sli.first.value
          if ((d + sli.second.value) > sli.to) d = sli.to - sli.second.value
          sli.first.value += d
          sli.second.value += d
          dx = mouseX
        }
      }
    }
  }

红色矩形实际上是多余的,我只是把它放在这里作为视觉辅助。