拖动 RangeSlider 的范围

Question

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

我需要的是支持拖动两个手柄；在手柄之间单击并拖动时，两个手柄一起移动。 RangeSlider 的行为是将最近的句柄定位到单击的位置，我无法从任何属性中找到任何更改它的方法。

当提供的控件没有提供所需的功能时，我想知道是否唯一的方法是从头开始创建一个新组件，或者是否有任何自定义现有控件的方法？

Answer 1

你想要的肯定可以：

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

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

拖动 RangeSlider 的范围

Dragging the range of a RangeSlider

qt

qml

qtquick2

qtquickcontrols2

rangeslider