QML

admin管理员组

文章数量:1417136

QML

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: windowvisible: truewidth: 800height: 480title: qsTr("Hello World")Column {anchors.centerIn: parentspacing: 20//水平滑块Text {id: rowsliderStattext: qsTr("水平方向当前进度10%")font.pixelSize: 20color: "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: columnsliderStattext: qsTr("竖直方向当前进度10%")font.pixelSize: 20color: "green"}Slider {from: 0to: 100stepSize: 0.01value: 1orientation: Qt.VerticalsnapMode: "SnapAlways"onValueChanged: {columnsliderStat.text = "竖直方向当前进度" + value.toFixed(0) + "%"}}}
}

自定义Slider控件

Window {id: windowvisible: truewidth: 800height: 480title: qsTr("Hello World")Slider {id: controlvalue: 0.5anchors.centerIn: parentwidth: 200height: 20background: Rectangle {id: rect1width: control.availableWidthheight: 10radius: 7color: "orange"Rectangle {id: rect2width: control.visualPosition * rect1.widthheight: rect1.heightcolor: "red"radius: 7}}handle: Rectangle {x: control.visualPosition * (control.availableWidth - implicitWidth)y: control.availableHeight / 2 - implicitHeight / 2implicitWidth: 20implicitHeight: 26radius: 13color: 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: windowvisible: truewidth: 800height: 480title: qsTr("Hello World")RangeSlider {anchors.centerIn: parentfrom: 1to: 100first.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)}
}

本文标签： QML