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