当前位置：首页 > news >正文

QML学习笔记（三十七）QML的Slider

news 2025/10/15 6:38:40

前言

滑块拖动条，它用于进度条之间的主动拉动，比如音量控制，视频播放控制，显示范围拉伸等。

一、代码学习

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Row {anchors.centerIn: parentspacing: 20/* 横向滑块 */Slider {id: hSliderfrom: 0to: 100value: 25stepSize: 5          // 键盘/滚轮每次 ±5width: 200}/* 纵向滑块 */Slider {id: vSliderorientation: Qt.Verticalfrom: 0to: 100stepSize: 1height: 200}}/* 实时数值 */Label {anchors.horizontalCenter: parent.horizontalCenteranchors.bottom: parent.bottomanchors.margins: 20text: "横向：" + hSlider.value.toFixed(0) +"  纵向：" + vSlider.value.toFixed(1)}
}

在这里插入图片描述
可以看到，它同样有form、to、value这些属性，和progressbar一样，但这里还有一个stepSize，这是一个步进尺寸，代表移动一格是多少，比方说form0to100的范围，你的stepSize可以设置为1，也可以设置为5或10，这取决于你希望这些滑动的进度细化到什么程度。这就是为什么有些音乐播放器的音量条，你移动一格就是5%，想要移动1%却做不到，大概就是这个参数控制了。
orientation属性则用来控制方向，这很好理解。

二、样式

这里直接提供一个样式例子，可以根据需要自行修改：

Slider {id: sliderfrom: 0to: 100value: 30width: 220height: 40/* 滑槽 */background: Rectangle {id: grooveanchors.verticalCenter: parent.verticalCenterheight: 6radius: height / 2color: "#e0e0e0"border.width: 1border.color: "#ccc"}/* 已走过区域（可选） */Rectangle {anchors.left: groove.leftanchors.verticalCenter: groove.verticalCenterheight: groove.heightwidth: groove.width * slider.positionradius: groove.radiuscolor: "#17a81a"}/* 圆形滑块 —— 关键：锚左边 + x 偏移 */handle: Rectangle {id: hdwidth: 18; height: 18radius: 9color: slider.pressed ? "#2196F3" : "#666"border.width: 1border.color: "#999"/* 让滑块中心对准槽口 */anchors.verticalCenter: groove.verticalCenter/* 0% 时中心贴着左边缘，100% 时中心贴着右边缘 */x: slider.position * (groove.width - hd.width)z: 2    // 控制z轴层级，避免被线条盖住}onMoved: function(){console.log(slider.position + " x:" + slider.position * (groove.width - hd.width))}
}

在这里插入图片描述
这里的样式几乎全部自己“拼”，而不像QSlider里面的样式表。个人感觉还是麻烦许多，但相对来说更加自由了。要知道，QSlider里的滑块尺寸一直都很诡异，要计算各种边距padding什么的去计算，不然永远都是变形。这里qml虽然写得麻烦，但样式起码很好实现，滑块这里赋值了一个Rectangle，实际上赋一个Image的图片也可以。