QML_滑块Slider

QML_滑块Slider

Slider从大概念上还是分为了两类的，一类就是我们即将要说的Slider，单向滑块；还有一类是RangeSlider，双向滑块。先来说单向滑块Slider的属性，它有一部分是和ProgressBar重合的
属性：
1、from : real，默认为0.0，范围的起始值
2、handle : Item，保存句柄项
3、orientation : enumeration，方向，默认为Qt.Horizontal(水平)
4、position : real，保存手柄的逻辑位置，范围为0.0 - 1.0
5、pressed : bool，是否按下滑块
6、snapMode : enumeration，保留捕捉模式

Window {
    id: window
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    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(2) + "%"  //toFixed(2),函数表示四舍五入保留两位有效数值
            }
        }
        //竖直滑块
        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) + "%"
            }
        }
    }
}

 自定义Slider控件

Window {
    id: window
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    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
我们以第一组来举例。
first.handle : Item，保存第一个句柄项
first.hovered : bool，保存是否悬停第一个句柄
first.implicitHandleHeight : real，保存第一个句柄的隐式高度
first.implicitHandleWidth : real，保存第一个句柄的隐式宽度
first.position : real，保存第一个句柄的逻辑位置
first.pressed : bool，保存是都通过触摸鼠标或者按键按下第一个句柄
first.value : real，保存第一个句柄的值
first.visualPosition : real，保存第一个句柄的视觉位置
第二组的属性也包括这些，除此之外，两组的公共属性包括：
from : real，范围的起始值
horizontal : bool，保存滑块是否为水平
live : bool，保存在拖动相应的控柄时，滑块是否为first.value和second.value属性提供实时更新
orientation : enumeration，保存方向
snapMode : enumeration，保存捕捉模式
stepSize : real，保存步长
to : real，范围的结束值
touchDragThreshold : qreal，保存将启动触摸拖动事件的阈值
vertical : bool，保存滑块是否垂直

Window {
    id: window
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    RangeSlider {
        anchors.centerIn: parent
        from: 1
        to: 100
        first.value: 20  //左边手柄的默认值
        second.value: 80  //右边手柄的默认值
        snapMode: "SnapAlways"
        stepSize: 5  //步进值

        first.onMoved: console.log("first.value changed to " + first.value)
        second.onMoved: console.log("second.value changed to " + second.value)
    }
}