一、描述
RangeSlider 是有两个滑块的滑动条,拖动两个滑块可以确定值范围。
二、属性成员
1、first group
第一个滑块的属性。
- first.handle : Item:第一个滑块项。
- first.hovered : bool:第一个滑块是否悬停。
- first.implicitHandleHeight : real:第一个滑块的隐式高度。
- first.implicitHandleWidth : real:第一个滑块的隐式宽度。
- first.position : real:逻辑位置。
- first.pressed : bool:第一个滑块是否被触摸、鼠标或按键按下。
- first.value : real:当前值。
- first.visualPosition : real:视觉位置,范围为 0.0 - 1.0。当控件被镜像时,该值等于 1.0 - first.position
second group
第二个滑块的属性。
- second.handle : Item
- second.hovered : bool
- second.implicitHandleHeight : real
- second.implicitHandleWidth : real
- second.position : real
- second.pressed : bool
- second.value : real
- second.visualPosition : real
2、from : real
范围的起始值。 默认为 0.0。
to : real
范围的结束值。 默认为 1.0。
3、[read-only] horizontal : bool
滑动条是否水平。
[read-only] vertical : bool
滑动条是否垂直。
orientation : enumeration
方向。
- Qt.Horizontal:(默认)
- Qt.Vertical
4、live : bool
是否在拖动相应的滑块时为 first.value 和 second.value 属性提供实时更新。默认为 true。
5、snapMode : enumeration
对齐模式。对齐模式确定滑块相对于 stepSize 的行为方式。
- RangeSlider.NoSnap:不对齐(默认)。
- RangeSlider.SnapAlways:拖动滑块时对齐。
- RangeSlider.SnapOnRelease:在拖动时不会对齐,只有在滑块释放后才会对齐。
6、stepSize : real
步长。
7、touchDragThreshold : qreal
将启动触摸拖动事件的阈值(以逻辑像素为单位)。 鼠标拖动阈值不会受到影响。默认值为 Qt.styleHints.startDragDistance。
三、信号成员
1、void first.moved()
void second.moved()
当用户通过触摸、鼠标或按键交互移动第一个或第二个滑块时,将发出此信号。
四、成员函数
1、void first.decrease() / void second.decrease()
滑块的值减少 stepSize,如果未定义 stepSize,则减少 0.1。
void first.increase() / void second.increase()
滑块的值增加 stepSize,如果未定义 stepSize,则增加 0.1。
2、void setValues(real firstValue, real secondValue)
设置 first.value 和 second.value。
如果 to 大于 from 且 firstValue 大于 secondValue,则 firstValue 将被限制为 secondValue。
如果 from 大于 to 且 secondValue 大于 firstValue,则 secondValue 将被限定为 firstValue。
3、real valueAt(real position)
返回给定位置的值。
五、自定义 RangeSlider 示例
import QtQuick
import QtQuick.Controls
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
RangeSlider {
id: control
first.value: 0.25
second.value: 0.75
background: Rectangle {
x: control.leftPadding
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitWidth: 200
implicitHeight: 4
width: control.availableWidth
height: implicitHeight
radius: 2
color: "#bdbebf"
Rectangle {
x: control.first.visualPosition * parent.width
width: control.second.visualPosition * parent.width - x
height: parent.height
color: "#21be2b"
radius: 2
}
}
first.handle: Rectangle {
x: control.leftPadding + control.first.visualPosition * (control.availableWidth - width)
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitWidth: 26
implicitHeight: 26
radius: 13
color: control.first.pressed ? "#f0f0f0" : "#f6f6f6"
border.color: "#bdbebf"
}
second.handle: Rectangle {
x: control.leftPadding + control.second.visualPosition * (control.availableWidth - width)
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitWidth: 26
implicitHeight: 26
radius: 13
color: control.second.pressed ? "#f0f0f0" : "#f6f6f6"
border.color: "#bdbebf"
}
}
}