可以滑动控制改变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
}
}