6. Slider 和 RangeSlider 的简单使用

1. Slider

提供一个单方向的滑动条，可以拖动其位置，动态设置某一控件的属性

常用属性：

from：初始值
to：终值
value：当前值
onMoved()：响应滑动函数

示例：

使用 slider 控制一个矩形的颜色透明度，代码(使用 Qt Designer Studio编写)如下：

import QtQuick 2.15
import QtQuick.Controls 2.15
Item {
    id: item1
    width: 1920
    height: 1080

    Rectangle {
        id: rectangle
        width: 400
        height: 200
        color: Qt.rgba(0.0,1.0,0.0,slider.value)
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
    }

    Slider {
        id: slider
        anchors.top: rectangle.bottom
        anchors.horizontalCenter: rectangle.horizontalCenter
        anchors.topMargin: 80
        value: 0.5
    }
}

运行界面如下：(运行效果，读者可自行尝试)

2. RangeSlider

提供一个双向的滑动条，两边均可单独拖动，使用方式和 Slider 类似

常用属性：

first.handle : 设置第一个控制球的样式
first.position : 第一个控制球的位置
first.pressed : 是否按下
first.value : 第一个控制球数值
from：初始值
to：终值
second.handle : 设置第二个控制球的样式
second.position : 第二个控制球的位置
second.pressed : 是否按下
second.value : 第二个控制球数值

简单示例：

 RangeSlider {
     from: 1
     to: 100
     first.value: 25
     second.value: 75
 }

持续更新中，请大家多多关注…