文章目录
- [1. Line Edit](#1. Line Edit)
- [2. Text Edit](#2. Text Edit)
- [3. Combo Box](#3. Combo Box)
- [4. Spin Box](#4. Spin Box)
- [5. Date Edit & Time Edit](#5. Date Edit & Time Edit)
- [6. Dial](#6. Dial)
- [7. Slider](#7. Slider)
1. Line Edit
QLineEdit 用来表示单行输入框. 可以输入一段文本, 但是不能换行.
核心属性
| 属性 | 说明 |
|---|---|
| text | 输入框中的文本 |
| inputMask | 输入内容格式约束 |
| maxLength | 最大长度 |
| frame | 是否添加边框 |
| echoMode | 显示方式. + QLineEdit::Normal :这是默认值,文本框会显示输入的文本。 + QLineEdit::Password :在这种模式下,输入的字符会被隐藏, 通常用星号(*)或等号(=)代替。 + QLineEdit::NoEcho :在这种模式下,文本框不会显示任何输入的字符。 |
| cursorPosition | 光标所在位置 |
| alignment | 文字对齐方式, 设置水平和垂直方向的对齐. |
| dragEnabled | 是否允许拖拽 |
| readOnly | 是否是只读的(不允许修改) |
| placeHolderText | 当输入框内容为空的时候, 显示什么样的提示信息 |
| clearButtonEnabled | 是否会自动显示出 "清除按钮" . |
核心信号
| 属性 | 说明 |
|---|---|
| void cursorPositionChanged(int old, int new) | 当鼠标移动时发出此信号,old为先前的位置,new为新位置。 |
| void editingFinished() | 当按返回或者回车键时,或者行编辑失去焦点时,发出此信号。 |
| void returnPressed() | 当返回或回车键按下时发出此信号. 如果设置了验证器, 必须要验证通过, 才能触发. |
| void selectionChanged() | 当选中的文本改变时,发出此信号。 |
| void textChanged(const QString &text) | 当QLineEdit中的文本改变时,发出此信号,text是新的文本。 代码对文本的修改能够触发这个信号. |
| void textEdited(const QString &text)) | 当QLineEdit中的文本改变时,发出此信号,text是新的文本。 代码对文本的修改不能触发这个信号. |
代码示例:录入个人信息
在界面上创建三个输入框和两个单选按钮, 一个普通按钮.
三个输入框的 objectName 为 lineEdit_name , lineEdit_password , lineEdit_phone
两个单选按钮的 objectName 为 radioButton_male , radioButton_female
按钮的 objectName 为 pushButton

编写 widget.cpp, 在构造函数中编写初始化代码
cpp
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 初始化第一个输入框
ui->lineEdit_name->setPlaceholderText("请输入姓名");
ui->lineEdit_name->setClearButtonEnabled(true);
// 初始化第二个输入框
ui->lineEdit_password->setPlaceholderText("请输入密码");
ui->lineEdit_password->setClearButtonEnabled(true);
ui->lineEdit_password->setEchoMode(QLineEdit::Password);
// 初始化第三个输入框
ui->lineEdit_phone->setPlaceholderText("请输入电话号码");
ui->lineEdit_phone->setClearButtonEnabled(true);
// 验证⼿机号码必须是 11 位数字. 并且按照 "344" 的格式来输入.
ui->lineEdit_phone->setInputMask("000-0000-0000");
}


继续修改 widget.cpp, 给按钮添加 slot 函数
cpp
void Widget::on_pushButton_clicked()
{
QString gender = ui->radioButton_male->isChecked() ? "男" : "女";
qDebug() << "姓名: " << ui->lineEdit_name->text()
<< "密码: " << ui->lineEdit_password->text()
<< "性别: " << gender
<< "电话号码: " << ui->lineEdit_phone->text();
}
此处咱们只是进行简单打印,实际开发中可以通过网络把数据发给服务器了.
运行结果:

inputMask 只能进行简单的输入格式校验.
实际开发中, 基于正则表达式的方式是更核心的方法
代码示例:使用正则表达式验证输入框的数据
此处要求在输入框中输入一个合法的电话号码(1 开头, 11 位, 全都是数字). 如果验证不通过, 则确定按钮无法点击.
关于正则表达式
正则表达式是一种在计算机中常用的, 使用特殊字符描述一个字符串的特征的机制. 在进行字符串匹配时非常有用.
正则表达式的语法还比较复杂, 一般都是随用随查, 不需要背下来.参考:
正则表达式文档 正则表达式语法
正则表达式在线工具: 正则表达式语法测试工具 - 在线工具
在界面上创建输入框和一个按钮,把按钮初始 enabled 设为 false

编写 widget.cpp, 给输入框添加验证器.
- 使用 QRegExp 创建一个正则表达式对象.
<font style="color:rgb(31,35,41);">"^1\\d{10}$"</font>表示 "以 1 开头, 后面跟上任意的10个十进制数字". - 使用 QRegExpValidator 创建一个验证器对象. Qt 中内置了四个主要的验证器对象.
cpp
#include "widget.h"
#include "ui_widget.h"
#include <QRegExpValidator>
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
QRegExp regexp("^1\\d{10}$");
ui->lineEdit->setValidator(new QRegExpValidator(regexp));
}
编写 widget.cpp, 给 lineEdit 添加 textEdited 信号的 slot 函数.
- on_lineEdit_textEdited 的参数是当前输入框的内容.
- 通过 lineEdit->validator() 获取到内置的验证器.
- 通过 validate 方法验证文本是否符合要求.
- 第一个参数填写的是要验证的字符串. 由于参数要求是 QString& 而不是 const QString& , 需要把这个变量复制一下.
- 第二个参数是一个 int&, 是输出型参数. 当验证的字符串不匹配时, 返回这个字符串的长度. (没有啥实质作用).
- 返回值是一个枚举. QValidator::Acceptable 表示验证通过, QValidator::Invalid 表示验证不通过.
cpp
void Widget::on_lineEdit_textEdited(const QString &arg1)
{
QString content = arg1;
int pos = 0;
if (ui->lineEdit->validator()->validate(content, pos) == QValidator::Acceptable)
{
// 验证通过
ui->pushButton->setEnabled(true);
}
else
{
// 验证不通过
ui->pushButton->setEnabled(false);
}
}
执行程序, 观察效果. 可以看到此时尝试输入字母是无法输入的. 并且只有当输入的内容符合要求, 确定按钮才能被使用.

代码示例:切换显示密码
创建一个输入框和一个复选按钮.

修改 widget.cpp, 设置输入框的 echoMode 为 Password
cpp
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
ui->lineEdit->setEchoMode(QLineEdit::Password);
}
修改 widget.cpp, 给 checkBox 添加 slot 函数
cpp
void Widget::on_checkBox_toggled(bool checked)
{
if(checked)
{
// true 则是 "显示密码" 状态, 就把输入框的显示模式, 设为 Normal
ui->lineEdit->setEchoMode(QLineEdit::Normal);
}
else
{
// false 则是 "隐藏密码" 状态, 就把输入框的显示模式, 设为 Password
ui->lineEdit->setEchoMode(QLineEdit::Password);
}
}
运行结果:

2. Text Edit
QTextEdit 表示多行输入框. 也是一个富文本 & markdown 编辑器.
并且能在内容超出编辑框范围时自动提供滚动条.
核心属性
| 属性 | 说明 |
|---|---|
| markdown | 输容入框内持有的内容. 支持 markdown 格式. 能够自动的对markdown 文本进行渲染成 html |
| html | 输入框内持有的内容. 可以支持大部分 html 标签. 包括 img 和 table 等. |
| placeHolderText | 输入框为空时提示的内容. |
| readOnly | 是否是只读的 |
| undoRedoEnable | 是否开启 undo / redo 功能. 按下 ctrl + z 触发 undo 按下 ctrl + y 触发 redo |
| autoFormating | 开启自动格式化. |
| tabstopWidth | 按下缩进占多少空间 |
| overwriteMode | 是否开启覆盖写模式 |
| acceptRichText | 是否接收富文本内容 |
| verticalScrollBarPolicy | 垂直方向滚动条的出现策略 + Qt::ScrollBarAsNeeded : 根据内容自动决定是否需要滚动条。这是默认值。 + Qt::ScrollBarAlwaysOff : 总是关闭滚动条。 + Qt::ScrollBarAlwaysOn : 总是显示滚动条。 |
| horizontalScrollBarPolicy | 水平方向滚动条的出现策略 + Qt::ScrollBarAsNeeded : 根据内容自动决定是否需要滚动条。这是默认值。 + Qt::ScrollBarAlwaysOff : 总是关闭滚动条。 + Qt::ScrollBarAlwaysOn : 总是显示滚动条。 |
核心信号
| 信号 | 说明 |
|---|---|
| textChanged() | 文本内容改变时触发 |
| selectionChanged() | 选中范围改变时触发 |
| cursorPositionChanged() | 光标移动时触发 |
| undoAvailable(bool) | 可以进行 undo 操作时触发 |
| redoAvailable(bool) | 可以进行 redo 操作时触发 |
| copyAvaiable(bool) | 文本被选中/取消选中时触发 |
代码示例:获取多行输入框的内容
创建一个多行输入框和一个label

给多行输入框添加 slot 函数,处理 textChanged 信号.
- 通过 toPlainText 方法获取到内部的文本.
- 类似的, QTextEdit 还提供了 toMarkdown 和 toHtml . 根据需要我们调整不同的获取方式.

cpp
#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
}
Widget::~Widget()
{
delete ui;
}
void Widget::on_textEdit_textChanged()
{
QString text = ui->textEdit->toPlainText();
ui->label->setText(text);
}
执行程序, 可以看到当输入框中的内容发生变化时, label 中的内容同步发生改变.

代码示例:验证输入框的各种信号
创建多行输入框

给输入框添加以下几个 slot 函数
- QTextEdit 中包含了一个 QTextCursor 对象, 通过这个对象可以获取到当前光标位置和选中的内容.
cpp
#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
}
Widget::~Widget()
{
delete ui;
}
void Widget::on_textEdit_textChanged()
{
qDebug() << "textChanged: " << ui->textEdit->toPlainText();
}
void Widget::on_textEdit_selectionChanged()
{
QTextCursor cursor = ui->textEdit->textCursor();
qDebug() << "selectionChanged: " << cursor.selectedText();
}
void Widget::on_textEdit_cursorPositionChanged()
{
QTextCursor cursor = ui->textEdit->textCursor();
qDebug() << "cursorPositionChanged: " << cursor.position();
}
void Widget::on_textEdit_undoAvailable(bool b)
{
qDebug() << "undoAvailable: " << b;
}
void Widget::on_textEdit_redoAvailable(bool b)
{
qDebug() << "redoAvailable: " << b;
}
void Widget::on_textEdit_copyAvailable(bool b)
{
qDebug() << "copyAvailable: " << b;
}
执行程序, 观察结果.
可以看到:
- 编写内容时, textChanged 和 cursorPositionChanged 会触发

- 选中一段文本时, cursorPositionChanged , selectionChanged , copyAvailable 会触发.

取消选中时

- 按下 ctrl + z 时, textChanged , undoAvailable , redoAvailable , cursorPositionChanged 会触发

- 按下 ctrl + y, textChanged , undoAvailable , redoAvailable , cursorPositionChanged 会触发

3. Combo Box
QComboBox 表示下拉框.
核心属性
| 属性 | 说明 |
|---|---|
| currentText | 当前选中的文本 |
| currentIndex | 当前选中的条目下标.从 0 开始计算. 如果当前没有条目被选中, 值为 -1 |
| editable | 是否允许修改 设为 true 时, QComboBox 的行为就非常接近 QLineEdit , 也可以 设置 validator |
| iconSize | 下拉框图标 (小三角) 的大小 |
| maxCount | 最多允许有多少个条目 |
核心方法
| 方法 | 说明 |
|---|---|
| addItem(const QString&) | 添加一个条目 |
| currentIndex() | 获取当前条目的下标 从 0 开始计算. 如果当前没有条目被选中, 值为 -1 |
| currentText() | 获取当前条目的文本内容. |
核心信号
| 方法 | 说明 |
|---|---|
| activated(int) activated(const QString & text) | 当用户选择了一个选项时发出. 这个时候相当于用户点开下拉框, 并且鼠标划过某个选项. 此时还没有确认做出选择. |
| currentIndexChanged(int) currentIndexChanged(const QString & text) | 当前选项改变时发出. 此时用户已经明确的选择了一个选项. 用户操作或者通过程序操作都会触发这个信号. |
| editTextChanged(const QString & text) | 当编辑框中的文本改变时发出 (editable 为 true 时有效) |
代码示例:使用下拉框模拟麦当劳点餐
在界面上创建三个下拉框, 和一个按钮.

编写 widget.cpp, 初始化三个下拉框的内容
cpp
#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
ui->comboBox->addItem("麦辣鸡腿堡");
ui->comboBox->addItem("巨无霸");
ui->comboBox_2->addItem("薯条");
ui->comboBox_2->addItem("麦乐鸡块");
ui->comboBox_3->addItem("可乐");
ui->comboBox_3->addItem("雪碧");
}
编写 widget.cpp, 给按钮添加 slot 函数
cpp
void Widget::on_pushButton_clicked()
{
qDebug() << ui->comboBox->currentText() << ", "
<< ui->comboBox_2->currentText() << ", "
<< ui->comboBox_3->currentText();
}
运行结果:

代码示例:从文件中加载下拉框的选项
很多时候下拉框的选项并非是固定的, 而是通过读取文件/读取网络获取到的.
在界面上创建一个下拉框

创建文件 d:/config.txt , 编写选项. 每个选项占一行

修改 widget.cpp, 从文件中读取选项.
- 使用 ifstream 打开文件
- 使用 getline 读取每一行
- 使用 QString::fromStdString 把 std::string 转成 QString
cpp
#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
#include <fstream>
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
std::fstream file("D:/config.txt");
if(!file.is_open())
{
qDebug() << "文件打开失败";
return;
}
std::string line;
while(std::getline(file, line))
{
ui->comboBox->addItem(QString::fromStdString(line));
}
file.close();
}
Widget::~Widget()
{
delete ui;
}
运行结果:

4. Spin Box
使用 QSpinBox 或者 QDoubleSpinBox 表示 "微调框", 它是带有按钮的输入框. 可以用来输入整
数/浮点数. 通过点击按钮来修改数值大小
由于 SpinBox 和 QDoubleSpinBox 用法基本相同, 就只介绍 SpinBox 的使用了.

Spin 英文原意为 "旋转". 此处引申成 "微调".
事实上很多术语在翻译的时候, 不一定非要按照原始的翻译来表示, 更追求的是 "信达雅".
举个例子, 地铁上的 "Priority Seat" 会翻译成 "爱心专座", 而不是 "优先座位".
QSpinBox 关键属性
| 属性 | 说明 |
|---|---|
| value | 存储的数值. |
| singleStep | 每次调整的 "步长". 按下一次按钮数据变化多少. |
| displayInteger | 数字的进制. 例如 displayInteger 设为 10, 则是按照 10 进制表示. 设为 2 则为 2 进制表示. |
| minimum | 最小值 |
| maximum | 最大值 |
| suffix | 后缀 |
| prefix | 前缀 |
| wrapping | 是否允许换行 |
| frame | 是否带边框 |
| alignment | 文字对齐方式. |
| readOnly | 是否允许修改 |
| buttonSymbol | 按钮上的图标. + UpDownArrows 上下箭头形式 + PlusMinus 加减号形式 + NoButtons 没有按钮 |
| accelerated (加速的) | 按下按钮时是否为快速调整模式 |
| correctionMode | 输入有误时如何修正. + QAbstractSpinBox::CorrectToPreviousValue : 如果用户输入了一个无效的值(例如,在只能显示正整数的SpinBox中输入了负数),那么 SpinBox 会恢复为上一个有效值。例如,如果SpinBox的初始值是1,用户输入了-1(无效),然后SpinBox会恢复为1。 + QAbstractSpinBox::CorrectToNearestValue : 如果用户输入了一个无效的值,SpinBox会恢复为最接近的有效值。例如,如果SpinBox的初始值是1,用户输入了-1(无效),那么SpinBox会恢复为0。 |
| keyboardTrack | 是否开启键盘跟踪. 设为 true, 每次在输入框输入一个数字, 都会触发一次 valueChanged() 和 textChanged() 信号. 设为 false, 只有在最终按下 enter 或者输入框失去焦点, 才会触发 valueChanged() 和 textChanged() 信号. |
核心信号
| 信号 | 说明 |
|---|---|
| textChanged(QString) | 微调框的文本发生改变时会触发. 参数 QString 带有 前缀 和 后缀. |
| valueChanged(int) | 微调框的文本发生改变时会触发. 参数 int, 表示当前的数值. |
代码示例:调整麦当劳购物车中的份数.
在界面上创建下列内容
- 三个下拉框: objectName 为 comboBox 到 comboBox_3
- 三个微调框: objectName 为 spinBox 到 spinBox_3
- 一个按钮: objectName 为 pushButton

编写代码, 修改 widget.cpp, 给下拉框设置初始值.
cpp
#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 初始化下拉框
ui->comboBox->addItem("麦辣鸡腿堡");
ui->comboBox->addItem("巨无霸");
ui->comboBox_2->addItem("薯条");
ui->comboBox_2->addItem("麦乐鸡块");
ui->comboBox_3->addItem("可乐");
ui->comboBox_3->addItem("雪碧");
// 初始化微调框
ui->spinBox->setRange(1, 5);
ui->spinBox_2->setRange(1, 5);
ui->spinBox_3->setRange(1, 5);
ui->spinBox->setValue(1);
ui->spinBox_2->setValue(1);
ui->spinBox_3->setValue(1);
}
Widget::~Widget()
{
delete ui;
}
编写代码, 给按钮添加 slot 函数
cpp
void Widget::on_pushButton_clicked()
{
qDebug() << ui->comboBox->currentText() << ": " << ui->spinBox->value()
<< ui->comboBox_2->currentText() << ": " << ui->spinBox_2->value()
<< ui->comboBox_3->currentText() << ": " << ui->spinBox_3->value();
}
执行程序, 可以看到当用户选择不同的内容时, 点击按钮就能获取到对应的结果. 同时我们也无法输入一些超出范围的非法值.

5. Date Edit & Time Edit
使用 QDateEdit 作为日期的微调框.

使用 QTimeEdit 作为时间的微调框

使用 QDateTimeEdit 作为时间日期的微调框.

这几个控件用法非常相似, 我们以 QDateTimeEdit 为例进行介绍.
QDateTimeEdit 核心属性
| 属性 | 说明 |
|---|---|
| dateTime | 时间日期的值. 形如 2000/1/1 0:00:00 |
| date | 单纯日期的值. 形如 2001/1/1 |
| time | 单纯时间的值. 形如 0:00:00 |
| displayFormat | 时间日期格式. 形如 yyyy/M/d H:mm + y 表示年份 + M 表示月份 + d 表示日期 + H 表示小时 + m 表示分钟 + s 表示秒 注意: 这里的格式化符号的含义, 不要记忆. 不同语言/库的设定规则是存在差异的. 一定是用的时候再去查. |
| minimumDateTime | 最小时间日期 |
| maximumDateTime | 最大时间日期 |
| timeSpec | + Qt::LocalTime :显示本地时间。 + Qt::UTC :显示协调世界时(UTC)。 + Qt::OffsetFromUTC :显示相对于UTC的偏移量(时差). |
关于 本地时间(LocalTime) 和 协调世界时(UTC)
UTC 时间是一个基于原子钟的标准时间. 不受地球的自转周期影响. 和格林威治时间 (GMT) 是非常接近的. 科学家会通过精密的设备来测量并维护.
咱们的计算机内部使用的时间就是基于 UTC 时间.本地时间则是基于不同的时区, 对 UTC 时间做出了一些调整. 比如咱们使用的北京时间, 位于 "东⼋区", 就需要在 UTC 时间基础上 +8 个小时的时差.
核心信号
| 信号 | 说明 |
|---|---|
| dateChanged(QDate) | 日期改变时触发. |
| timeChanged(QTime) | 时间改变时触发. |
| dateTimeChanged(QDateTime) | 时间日期任意一个改变时触发 |
代码示例:实现日期计算器
在界面上创建两个 QDateTimeEdit 和一个按钮, 一个 label
QDateTimeEdit 的 objectName 为 dateTimeEdit_old 和 dateTimeEdit_new

编写计算按钮的 slot 函数
- 使用 daysTo 函数可以计算两个日期的天数.
- 使用 secsTo 函数可以计算两个时间的秒数.
- 通过 (秒数 / 3600) 换算成小时数, 再余上 24 得到零几个小时.
- 使用 QString::number 把整数转成 QString 进行拼接.
注意,在使用daysTo时其实是有一点问题的,我们可以查看一下文档

这段话的意思是返回从该日期时间到另一个日期时间的天数。天数计算为从该日期时间到另一个日期时间达到午夜的次数。这意味着从23:55到第二天0:05的10分钟差算作一天。
如果另一个日期时间比这个日期时间早,返回的值为负。
我们这里实现日期计算器的话,在不足一天时不应该算作一天
所以我们这里可以通过使用 secsTo 函数可以计算两个时间的秒数,然后通过 (秒数 / 3600) 换算成小时数, 再除以 24 得到天数
cpp
void Widget::on_pushButton_clicked()
{
QDateTime timeOld = ui->dateTimeEdit_old->dateTime();
QDateTime timeNew = ui->dateTimeEdit_new->dateTime();
int sec = timeOld.secsTo(timeNew);
int days = (sec / 3600) / 24;
int hours = (sec / 3600) % 24;
ui->label->setText(QString("计算结果为: ") + QString::number(days)
+ QString("天零") + QString::number(hours) + QString("个小时"));
}
运行结果:

6. Dial
使用 QDial 表示一个 旋钮.
有些程序, 通过鼠标拖动旋钮旋转, 即可完成一些相关的设置.

核心属性
| 属性 | 说明 |
|---|---|
| value | 持有的数值. |
| minimum | 最小值 |
| maximum | 最大值 |
| singleStep | 按下方向键的时候改变的步长. |
| pageStep | 按下 pageUp / pageDown 的时候改变的步长. |
| sliderPosition | 界面上旋钮显示的 初始位置 |
| tracking | 外观是否会跟踪数值变化. 默认值为 true. 一般不需要修改. |
| wrapping | 是否允许循环调整. 即数值如果超过最大值, 是否允许回到最小值. (调整过程能否 "套圈") |
| notchesVisible | 是否显示 刻度线 |
| notchTarget | 刻度线之间的相对位置. 数字越大, 刻度线越稀疏. |
核心信号
| 属性 | 说明 |
|---|---|
| valueChanged(int) | 数值改变时触发 |
| rangeChanged(int, int) | 范围变化时触发 |
代码示例:调整窗口透明度
在界面上创建一个旋钮

编写 widget.cpp, 设置旋钮的 valueChanged slot 函数
cpp
void Widget::on_dial_valueChanged(int value)
{
qDebug() << value;
setWindowOpacity((double)value / 100);
}
运行结果:

7. Slider
使用 QSlider 表示一个滑动条.

QSlider 和 QDial 都是继承自 QAbstractSlider , 因此用法上基本相同.
核心属性
| 属性 | 说明 |
|---|---|
| value | 持有的数值. |
| minimum | 最小值 |
| maximum | 最大值 |
| singleStep | 按下方向键的时候改变的步长. |
| pageStep | 按下 pageUp / pageDown 的时候改变的步长. |
| sliderPosition | 滑动条显示的 初始位置 |
| tracking | 外观是否会跟踪数值变化. 默认值为 true. 一般不需要修改. |
| orientation | 滑动条的方向是水平还是垂直 |
| invertedAppearance | 是否要翻转滑动条的方向 |
| tickPosition | 刻度的位置. |
| tickInterval | 刻度的密集程度. |
核心信号
| 属性 | 说明 |
|---|---|
| valueChanged(int) | 数值改变时触发 |
| rangeChanged(int, int) | 范围变化时触发 |
代码示例:调整窗口大小
在界面上创建两个滑动条, 分别是水平和垂直滑动条.objectName 分别为 horizontalSlider 和 verticalSlider

编写代码初始化滑动条
cpp
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);
}
编写滑动条的 valueChanged slot 函数
cpp
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);
}
运行结果:

代码示例:通过自定义快捷键调整滑动条位置.
设置 - 减小 value, 设置 = 增加 value.
默认情况下滑动条可以通过 方向键 或者 pageUp / pageDown 调整大小.
在界面上创建滑动条和 label

创建 valueChanged 的 slot 函数
cpp
void Widget::on_horizontalSlider_valueChanged(int value)
{
ui->label->setText("当前的值为: " + QString::number(value));
}
修改 widget.cpp 构造函数, 增加快捷键
- 使用 QShortCut 类设置快捷键.
- 快捷键触发时, 会发出 QShortcut::activated 信号, 我们连接到自己写的 slot 函数
cpp
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);
}
编写⾃定义 slot 函数
cpp
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);
}
运行结果:
