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