qml 滑块Slider RangeSlider

可以滑动控制改变value大小，如音量调节
需要添加控件import QtQuick.Controls 2.2

Slider

单向滑块

• 属性
  from : real，默认为0.0，范围的起始值
  handle : Item，保存句柄项
  orientation : enumeration，方向，默认为Qt.Horizontal(水平)
  position : real，保存手柄的逻辑位置，范围为0.0 - 1.0
  pressed : bool，是否按下滑块
  snapMode : enumeration，保留捕捉模式：1）Slider.NoSnap 默认，滑块不对齐 2）Slider.SnapAlways 拖动手柄时，滑块会捕捉 3）Slider.SnapOnRelease 滑块拖动是不会捕捉，仅在释放手柄后才能捕捉
  stepSize : real，保存每一步的长度
  to : real，默认为1.0，范围的结束值
  value : real
  visualPosition : real，保存手柄的视觉位置

• 方法
  void decrease(),根据stepSize的值减小value
  void increase(),根据stepSize的值增加value
  real valueAt(real position)，返回给定位置的值

• 例子1
  

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("layout")
    color: "gray"

    Column{
        anchors.centerIn: parent
        spacing: 20
        //水平滑块
        Text {
            id: rowsliderStat
            text: qsTr("水平方向当前进度10%")
            font.pixelSize: 20
            color: "green"
        }
        Slider{
            stepSize: 0.01;
            from: 0
            to: 100
            value: 1;
            orientation:Qt.Horizontal
            snapMode:"SnapAlways"
            onValueChanged: {
                rowsliderStat.text = "水平方向当前进度" + value.toFixed(0)+"%";
            }
        }
        //竖直滑块
        Text {
            id: columnsliderStat
            text: qsTr("竖直方向当前进度10%")
            font.pixelSize: 20
            color: "green"
        }
        Slider{
            from: 0
            to: 100
            stepSize: 0.01;
            value: 1;
            orientation:Qt.Vertical
            snapMode:"SnapAlways"
            onValueChanged: {
                columnsliderStat.text = "竖直方向当前进度" + value.toFixed(0)+ "%";
            }
        }
    }
}

• 例子2 自定义滑块
  可视项是背景项，即低下的可滑动范围；和手柄项(内容项)，即滑动按钮
  

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: "gray"

    Slider {
        id: control
        value: 0.5
        anchors.centerIn: parent
        width: 200
        height: 20

        background: Rectangle {
            id: rect1
            width: control.availableWidth
            height: 10
            radius: 7
            color: "orange"

            Rectangle {
                id: rect2
                width: control.visualPosition * rect1.width
                height: rect1.height
                color: "red"
                radius: 7
            }
        }

        handle: Rectangle {
            x: control.visualPosition * (control.availableWidth - implicitWidth)
            y: control.availableHeight / 2 - implicitHeight / 2
            implicitWidth: 20
            implicitHeight: 26
            radius: 13
            color: control.pressed ? "green" : "white"
            border.color: "black"
        }
    }
}

RangeSlider

双向滑块，有两个手柄和两个value值

• 属性有两组：
  1）两组的公共属性
  from : real，范围的起始值
  horizontal : bool，保存滑块是否为水平
  live : bool，保存在拖动相应的控柄时，滑块是否为first.value和second.value属性提供实时更新
  orientation : enumeration，保存方向
  snapMode : enumeration，保存捕捉模式
  stepSize : real，保存步长
  to : real，范围的结束值
  touchDragThreshold : qreal，保存将启动触摸拖动事件的阈值
  vertical : bool，保存滑块是否垂直
  2）每组分别的属性（都一样），如第一组
  first.handle : Item，保存第一个句柄项
  first.hovered : bool，保存是否悬停第一个句柄
  first.implicitHandleHeight : real，保存第一个句柄的隐式高度
  first.implicitHandleWidth : real，保存第一个句柄的隐式宽度
  first.position : real，保存第一个句柄的逻辑位置
  first.pressed : bool，保存是都通过触摸鼠标或者按键按下第一个句柄
  first.value : real，保存第一个句柄的值
  first.visualPosition : real，保存第一个句柄的视觉位置

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: "gray"

    RangeSlider{
        anchors.centerIn: parent
        from:1
        to: 100
        first.value: 20
        second.value: 80
        snapMode: "SnapAlways"
        stepSize: 1
    }
}