【Qt开发】输入类控件(七)-> QSlider
目录
1 -> 概述
2 -> 核心属性
3 -> 核心信号
4 -> 核心特性
5 -> 信号与槽
6 -> 代码示例
6.1 -> 调整窗口大小
6.2 -> 通过自定义快捷键调整滑动条位置
7 -> 总结
1 -> 概述
在图形用户界面设计中,如何让用户直观、便捷地调整一个范围内的数值,是一个常见且重要的课题。无论是调节音量、设置亮度,还是控制播放进度,我们都需要一个既直观又高效的交互元素。Qt 框架提供的 QSlider 控件,正是为此而生的强大工具,它如同一条优雅的桥梁,无缝连接了用户的直观操作与程序的内部逻辑。
QSlider 是一个经典的滑块控件,它通过一个可拖动的“拇指”在一条“轨道”上移动,来代表并修改一个特定范围内的整数值。用户可以通过鼠标点击、拖动,或使用键盘方向键来操控它。这种视觉化的反馈方式,使得调整数值变得异常直观,用户能够立即感知到当前值在整体范围中的位置以及操作所带来的变化。
2 -> 核心属性
属性 | 说明 |
value | 持有的数值 |
minimum | 最小值 |
maximum | 最大值 |
singleStep | 按下方向键时改变的步长 |
pageStep | 按下 pageUp / pageDown 时改变的步长 |
sliderPosition | 滑动条显示的初始位置 |
tracking | 外观是否会跟踪数值变化 默认值为 true,一般不需要修改 |
orientation | 滑动条的方向是水平还是垂直 |
invertedAppearance | 是否要翻转滑动条的方向 |
tickPosition | 刻度的位置 |
tickInterval | 刻度的密集程度 |
3 -> 核心信号
属性 | 说明 |
valueChanged(int) | 数值改变时触发 |
rangeChanged(int, int) | 范围变化时触发 |
4 -> 核心特性
QSlider 的强大之处在于其高度的可定制性,开发者可以根据应用场景灵活配置其行为与外观。
-
方向与范围:
-
QSlider 可以轻松设置为水平或垂直方向,以适应不同的界面布局。水平滑块常用于表示进度或时间(如视频播放器),而垂直滑块则更适合用于控制强度(如音量调节)。
-
开发者可以自由设定滑块的最小值和最大值,从而精确界定其代表的数值范围。同时,还可以设置一个“页面步长”,用于定义当用户点击滑块轨道时,数值应发生多大的跳跃。
-
-
刻度与标记:
为了提供更精确的视觉参考,QSlider 支持显示刻度线。开发者可以控制刻度的密度和位置——可以将其置于轨道的单侧、双侧或不显示。这对于需要用户进行精细调整或快速估算数值的场景(如图像处理中的参数调节)尤为有用。 -
追踪与信号:
-
QSlider 默认启用了“追踪”功能。这意味着在用户拖动滑块的过程中,其代表的数值会实时、连续地发生变化,并触发相应的信号。这种即时反馈对于调节音量或颜色等需要实时预览的效果至关重要。
-
当追踪被禁用时,滑块的值只会在用户结束拖动(释放鼠标)时才更新。这在某些需要确认操作后才生效的场景下可能更有用。
-
5 -> 信号与槽
QSlider 的价值不仅仅在于其视觉呈现,更在于它与程序逻辑的连接能力。这主要通过 Qt 的核心机制——信号与槽来实现。
当滑块的值发生变化时,QSlider 会发出一个携带新数值的信号。开发者可以简单地将其与一个自定义的“槽函数”连接起来。无论用户是轻轻拖动了一下滑块,还是按下了键盘按键,只要数值改变,这个槽函数就会被自动调用。在这个函数内部,开发者可以编写任何逻辑:更新另一个标签的显示、调整一个滤波器的参数、改变窗口的透明度,或者向网络发送控制指令。这种设计实现了界面与逻辑的完美解耦,使得交互响应变得清晰而高效。
6 -> 代码示例
6.1 -> 调整窗口大小
1. 在界面上创建两个滑动条,分别是水平和垂直滑动条
2. 编写代码初始化滑动条
#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->horizontalSlider->setMinimum(100);ui->horizontalSlider->setMaximum(2000);ui->horizontalSlider->setValue(800);ui->horizontalSlider->setSingleStep(50);ui->verticalSlider->setMinimum(100);ui->verticalSlider->setMaximum(1500);ui->verticalSlider->setValue(600);ui->verticalSlider->setSingleStep(50);
}Widget::~Widget()
{delete ui;
}
3. 编写滑动条的 valueChanged slot 函数
void Widget::on_horizontalSlider_valueChanged(int value)
{const QRect& rect = this->geometry();this->setGeometry(rect.x(), rect.y(), value, rect.height());
}void Widget::on_verticalSlider_valueChanged(int value)
{const QRect& rect = this->geometry();this->setGeometry(rect.x(), rect.y(), rect.width(), value);
}
4. 执行程序,可以看到调整滑动条,窗口大小就会随之改变
6.2 -> 通过自定义快捷键调整滑动条位置
设置 - 减小 value,设置 = 增加 value
默认情况下滑动条可以通过 方向键 或者 pageUp / pageDown 调整大小
1. 在界面上创建滑动条和 label
2. 修改 widget.cpp 构造函数,增加快捷键
- 使用 QShortCut 类设置快捷键
- 快捷键触发时,会发出 QShortcut::activated 信号,连接到自己写的 slot 函数
#include "widget.h"
#include "ui_widget.h"#include <QShortcut>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QShortcut* shortcut1 = new QShortcut(this);shortcut1->setKey(QKeySequence("-"));QShortcut* shortcut2 = new QShortcut(this);shortcut2->setKey(QKeySequence("="));connect(shortcut1, &QShortcut::activated, this, &Widget::subValue);connect(shortcut2, &QShortcut::activated, this, &Widget::addValue);}Widget::~Widget()
{delete ui;
}
3. 创建 valueChanged 的 slot 函数
void Widget::on_horizontalSlider_valueChanged(int value)
{ui->label->setText("当前的值为: " + QString::number(value));
}
4. 编写自定义 slot 函数
void Widget::subValue()
{int value = ui->horizontalSlider->value();if (value <= ui->horizontalSlider->minimum()){return;}ui->horizontalSlider->setValue(value - 5);
}void Widget::addValue()
{int value = ui->horizontalSlider->value();if (value >= ui->horizontalSlider->maximum()){return;}ui->horizontalSlider->setValue(value + 5);
}
5. 执行程序,观察效果,可以看到,此时按下 - 和 = 就可以调整 value 的值了
7 -> 总结
QSlider 的设计体现了 Qt 框架一贯的“模型-视图”思想。滑块本身是“视图”,它向用户展示了当前的数值状态;而其内部的整数值则是“模型”。用户的交互操作修改了模型,模型的改变又通过信号通知外界,并更新视图的显示。这种清晰的分离使得代码易于维护和扩展。
QSlider 虽是一个基础控件,但它在构建直观、响应迅速的用户界面中扮演着不可或缺的角色。它成功地将抽象的数值转化为具象的、可操作的视觉元素,极大地降低了用户的理解和操作成本。通过其丰富的配置选项和强大的信号机制,Qt 开发者能够轻松地将这个简单而强大的控件融入到各种复杂的应用之中,创造出流畅且令人满意的用户体验。它不仅是工具箱中的一个部件,更是连接人与机器逻辑的优雅使者。
感谢各位大佬支持!!!
互三啦!!!