QML控件类型：Slider（滑动条）

一、属性成员

1、from : real

范围的起始值。默认为 0.0。

      to : real

范围的结束值。默认值为 1.0。

      value : real

当前值。 

2、handle : Item

滑块项。

3、[read-only] horizontal : bool

滑动条是否水平的。

      [read-only] vertical : bool

滑块是否垂直的。 

4、[read-only] implicitHandleHeight : real

handle 隐式高度。

该值等于 handle ？ handle.implicitHeight：0。

      [read-only] implicitHandleWidth : real

handle 隐式宽度。

该值等于 handle ？ handle.implicitHandleWidth ：0。

5、live : bool

是否在拖动滑块时为 value 属性提供实时更新。默认为 true。

6、orientation : enumeration

方向。

• Qt.Horizontal（默认）
• Qt.Vertical

7、[read-only] position : real

滑块的逻辑位置。范围为 0.0 - 1.0。

      [read-only] visualPosition : real

滑块的视觉位置。范围为 0.0 - 1.0。 当控件被镜像时，该值等于 1.0 - position。

8、pressed : bool 

滑动条是否被触摸、鼠标或按键按下。

9、snapMode : enumeration

对齐模式。对齐模式决定了滑块相对于 stepSize 的行为方式。

• Slider.NoSnap：不对齐（默认）。
• Slider.SnapAlways：拖动滑块时滑动条会对齐。
• Slider.SnapOnRelease：拖动滑块时不会对齐，只有在滑块释放后才会对齐。

 

10、stepSize : real

步长。 

11、touchDragThreshold : qreal

将启动触摸拖动事件的阈值（以逻辑像素为单位）。鼠标拖动阈值不会受到影响。 默认值为 Qt.styleHints.startDragDistance。

二、信号成员

1、moved()

当用户通过触摸、鼠标、滚轮或按键交互移动滑块时，会发出此信号。

三、成员函数

1、void decrease()

将 value 减小 stepSize 或 0.1（未设置 stepSize 时）。

2、void increase()

将 value 增加 stepSize 或 0.1（未设置 stepSize 时）。

3、real valueAt(real position)

返回给定位置的值。

四、自定义 Slider 示例

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Slider {
        id: control
        value: 0.5

        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 {
                width: control.visualPosition * parent.width
                height: parent.height
                color: "#21be2b"
                radius: 2
            }
        }

        handle: Rectangle {
            x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
            y: control.topPadding + control.availableHeight / 2 - height / 2
            implicitWidth: 26
            implicitHeight: 26
            radius: 13
            color: control.pressed ? "#f0f0f0" : "#f6f6f6"
            border.color: "#bdbebf"
        }
    }
}