输入类控件

目录

1.Line Edit

代码示例: 录入个人信息

代码示例: 使用正则表达式验证输入框的数据

代码示例: 验证两次输入的密码一致

代码示例: 切换显示密码

2.Text Edit

代码示例: 获取多行输入框的内容

代码示例: 验证输入框的各种信号

3.Combo Box

代码示例: 使用下拉框模拟借书系统

代码示例: 从文件中加载下拉框的选项

4.Spin Box

代码示例: 调整书籍借阅系统中的图书数目

5.Date Edit & Time Edit

代码示例: 实现日期计算器

6.Dial

代码示例: 调整窗口透明度

7.Slider

代码示例: 调整窗口大小

代码示例: 通过自定义快捷键调整滑动条位置.

---

1.Line Edit

• QLineEdit 用来表示单行输入框. 可以输入一段文本, 但是不能换行.

核心属性：

属性	说明
text	输入框中的文本
inputMask	输入内容格式约束
maxLength	最大长度
frame	是否添加边框
echoMode	显示方式. • QLineEdit::Normal ：这是默认值，文本框会显示输⼊的文本。 • QLineEdit::Password ：在这种模式下，输⼊的字符会被隐藏，通常用星号（*）或等号（=）代替。 • QLineEdit::NoEcho ：在这种模式下，文本框不会显示任何输入的字符。
cursorPosition	光标所在位置
alignment	⽂字对齐方式, 设置水平和垂直方向的对齐.
dragEnabled	是否允许拖拽
readOnly	是否是只读的(不允许修改)
placeHolderText	当输入框内容为空的时候, 显示什么样的提示信息
clearButtonEnabled	是否会自动显示出 "清除按钮" .

核心信号：

属性	说明
voidcursorPositionChanged(int old, int new)	当鼠标移动时发出此信号，old为先前的位置，new为新位置。
void editingFinished()	当按返回或者回车键时，或者行编辑失去焦点时，发出此信号。
void returnPressed()	当返回或回车键按下时发出此信号. 如果设置了验证器, 必须要验证通过, 才能触发.
void selectionChanged()	当选中的文本改变时，发出此信号。
Qvoid textChanged(const String &text)	当QLineEdit中的文本改变时，发出此信号，text是新的文本。 代码对文本的修改能够触发这个信号.
&void textEdited(const QString text))	当QLineEdit中的文本改变时，发出此信号，text是新的文本。 代码对文本的修改不能触发这个信号.

---

代码示例: 录入个人信息

🌵1) 在界面上创建三个输入框和两个单选按钮, 一个普通按钮.

• 三个输入框的 objectName 为 lineEdit_name , lineEdit_password ,lineEdit_phone
• 两个单选按钮的 objectName 为 radioButton_male , radioButton_female
• 普通按钮的 objectName 为 pushButton

🌵2) 编写 widget.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");
}

🌵3) 继续修改 widget.cpp, 给按钮添加 slot 函数

void Widget::on_pushButton_submit_clicked()
{
    QString gender = ui->radioButton_male->isChecked() ? "男" : "女";

    qDebug() << "姓名" << ui->lineEdit_name->text()
             << "密码" << ui->lineEdit_password->text()
             << "性别" << gender
             << "电话" << ui->lineEdit_phone->text();
}

🌵4) 执行程序, 可以看到, 随着用户输入内容之后, 点击按钮, 就能打印到输入的信息

• inputMask 只能进行简单的输入格式校验.
• 实际开发中, 基于正则表达式的方式是更核心的方法.

---

代码示例: 使用正则表达式验证输入框的数据

此处要求在输入框中输入一个合法的电话号码(1 开头, 11 位, 全都是数字). 如果验证不通过, 则确定按钮无法点击.

🍒关于正则表达式

• 正则表达式是一种计算机中的通用概念，本质上就是一个带有特殊字符的字符串，特殊字符用来表示另一个字符串的特征，和具体的编程语言无关，在进行字符串匹配时非常有用。
• 正则表达式的语法比较复杂, 一般都是随用随查, 不需要背下来。

参考:

正则表达式文档:https://learn.microsoft.com/zh-cn/previousversions/visualstudio/visual-studio-2008/ae5bf541(v=vs.90)?redirectedfrom=MSDN

正则表达式在线工具: https://regextester.buyaocha.com/

 

🌵1) 在界面上创建输入框和一个按钮.

此处的规则是，输入框要检查输入的内容是否是合法的手机号码。如果是，则按钮设为可用状态；如果不是，则按钮设为禁用状态。

🌵2) 编写 widget.cpp, 把按钮初始 enabled 设为 false. 给输入框添加验证器.

• 使用 QRegExp 创建一个正则表达式对象. "^1\\d{10}$" 表示 "以 1 开头, 后面跟上任意的10个十进制数字".
• 使用 QRegExpValidator 创建一个验证器对象. Qt 中内置了四个主要的验证器对象.

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    // 设置按钮默认是禁用状态
    ui->pushButton->setEnabled(false);
    
    // 给 lineEdit 注册一个 validator
    ui->lineEdit->setValidator(new QRegExpValidator(QRegExp("^1\\d{10}$")));
}

 "^1\\d{10}$" 这是一个简单的验证手机号码的正则表达式：

• ^ 表示以 xxx 开头。
• ^ 后面跟着的 1，意思就是以1开头。
• \d 表示数字，为了在 C++ 字符串中使用，需要写作 \\d。
• {10} 表示前面的内容重复出现 10 次，\d 数字要重复出现 10 次。
• $ 表示结尾。

🌵3) 编写 widget.cpp, 给 lineEdit 添加 textEdited 信号的 slot 函数.

a. on_lineEdit_textEdited 的参数是当前输入框的内容。

• 第一个参数填写的是要验证的字符串. 由于参数要求是 QString& 而不是 const QString& , 需要把这个变量复制一下。
• 第二个参数是一个 int&, 是输出型参数. 当验证的字符串不匹配时, 返回这个字符串的长度. (没有啥实质作用).
• 返回值是一个枚举. QValidator::Acceptable 表示验证通过,QValidator::Invalid 表示验证不通过.

b .通过 lineEdit->validator() 获取到内置的验证器.

c .通过 validate 方法验证文本是否符合要求.
 

void Widget::on_lineEdit_textEdited(const QString &text)
{
    QString content = text;
    int pos = 0;
    if(ui->lineEdit->validator()->validate(content, pos) == QValidator::Acceptable){
        // 验证通过，设置按钮的可用状态为启用
        ui->pushButton->setEnabled(true);
    }else{
        // 验证不通过，设置按钮的可用状态为禁用
        ui->pushButton->setEnabled(false);
    }
}

🌵4) 执行程序, 观察效果. 可以看到此时尝试输入字母是无法输入的. 并且只有当输入的内容符合要求, 确定按钮才能被使用.

---

代码示例: 验证两次输入的密码一致

🍓1) 在界面上创建两个输入框和一个 label

🍓2) 编写代码, 设置两个输入框的 echoMode 为 Password

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 初始化，把这两个输入框的 echoMode 设置一下
    ui->lineEdit->setEchoMode(QLineEdit::Password);
    ui->lineEdit_2->setEchoMode(QLineEdit::Password);
    ui->label->setText("密码为空");
}

🍓3) 给两个输入框设置 textEdited slot 函数

void Widget::on_lineEdit_textEdited(const QString &arg1)
{
    // 类型转换
    // 这种写法对于代码的实际逻辑没有任何影响，同时可以“骗过”编译器，警告就没了
    (void) arg1;
    this->compare();
}

void Widget::on_lineEdit_2_textEdited(const QString &arg1)
{
    (void) arg1;
    this->compare();
}

void Widget::compare()
{
    const QString& s1 = ui->lineEdit->text();
    const QString& s2 = ui->lineEdit_2->text();
    if(s1.isEmpty() && s2.isEmpty()){
        ui->label->setText("密码为空");
    }else if(s1 == s2){
        ui->label->setText("两次输入的密码相同！");
    }else{
        ui->label->setText("两次输入的密码不同！");
    }
}

🍓4) 执行程序, 观察效果.

可以看到当两个输入框内的密码相同时, 就会提示密码相同.

---

代码示例: 切换显示密码

🍒1) 创建⼀个输入框和⼀个复选按钮.

🍒2) 修改 widget.cpp, 设置输入框的 echoMode 为 Password

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //初始状态下，输入框按照密码状态来显示
    ui->lineEdit->setEchoMode(QLineEdit::Password);
}

🍒3) 修改 widget.cpp, 给 checkBox 添加 slot 函数

void Widget::on_checkBox_toggled(bool checked)
{
    if (checked){
        // true 则是 “显示密码” 状态
        ui->lineEdit->setEchoMode(QLineEdit::Normal);
    }else{
        // false 则是 “隐藏密码” 状态
        ui->lineEdit->setEchoMode(QLineEdit::Password);
    }
}

🍒4) 执行程序, 可以看到切换复选框的状态, 就可以控制输入框显示密码

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 : 总是显⽰滚动条。
horizontalScrollBarPolicy	⽔平⽅向滚动条的出现策略 • Qt::ScrollBarAsNeeded : 根据内容⾃动决定是否需要滚动条。这是默认值。 • Qt::ScrollBarAlwaysOff : 总是关闭滚动条。 • Qt::ScrollBarAlwaysOn : 总是显⽰滚动条。

核心信号

信号	说明
textChanged()	⽂本内容改变时触发
selectionChanged()	选中范围改变时触发
cursorPositionChanged()	光标移动时触发
undoAvailable(bool)	可以进⾏ undo 操作时触发
redoAvailable(bool)	可以进⾏ redo 操作时触发
copyAvaiable(bool)	⽂本被选中/取消选中时触发

---

代码示例: 获取多行输入框的内容

🍀1) 创建一个多行输入框和一个label

🍀2) 给多行输入框添加 slot 函数. 处理 textChanged 信号.

• 通过 toPlainText 方法获取到内部的文本.
• 类似的, QTextEdit 还提供了 toMarkdown 和 toHtml . 根据需要我们调整不同的获取方式.

void Widget::on_textEdit_textChanged()
{
    const QString& content = ui->textEdit->toPlainText();
    ui->label->setText(content);
}

🍀 3) 执行程序, 可以看到当输入框中的内容发生变化时, label 中的内容同步发生改变.

---

代码示例: 验证输入框的各种信号

🍺1) 创建多行输入框

🍺2) 给输入框添加以下几个 slot 函数

• QTextEdit 中包含了一个 QTextCursor 对象, 通过这个对象可以获取到当前光标位置和选中的内容.

void Widget::on_textEdit_textChanged()
{
    qDebug() << "textChanged：" << ui->textEdit->toPlainText();
}

void Widget::on_textEdit_selectionChanged()
{
    const QTextCursor& cursor = ui->textEdit->textCursor();
    qDebug() << "selectionChanged：" << cursor.selectedText();
}

void Widget::on_textEdit_cursorPositionChanged()
{
    const 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;
}

🍺3) 执行程序, 观察结果. 可以看到:

a. 编写内容时, textChanged 和 cursorPositionChanged 会触发

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

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

d. 按下 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 时有效)

---

代码示例: 使用下拉框模拟借书系统

🍀1) 在界面上创建三个下拉框, 和一个按钮

🍀2) 编写 widget.cpp, 初始化三个下拉框的内容

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    ui->comboBox->addItem("中国历代政治得失");
    ui->comboBox->addItem("秦汉简史");
    ui->comboBox->addItem("战国歧途");

    ui->comboBox_2->addItem("平凡的世界");
    ui->comboBox_2->addItem("一句顶一万句");
    ui->comboBox_2->addItem("小王子");

    ui->comboBox_3->addItem("最后一颗子弹留给我");
    ui->comboBox_3->addItem("狼群");
    ui->comboBox_3->addItem("冰是睡着的火");

}

🍀3) 编写 widget.cpp, 给按钮添加 slot 函数

void Widget::on_pushButton_clicked()
{
    qDebug() << "历史书籍选择: " << ui->comboBox->currentText();
    qDebug() << "文学书籍选择: " << ui->comboBox_2->currentText();
    qDebug() << "军旅书籍选择: " << ui->comboBox_3->currentText();
}

🍀4) 执行程序, 可以看到, 在点击确定按钮时, 就能获取到当前下拉框中选中的内容.

---

代码示例: 从文件中加载下拉框的选项

很多时候下拉框的选项并非是固定的, 而是通过读取文件/读取网络获取到的.

🌳1) 在界面上创建一个下拉框

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

形如:

🌳3) 修改 widget.cpp, 从文件中读取选项.

• 使用 ifstream 打开文件
• 使用 getline 读取每一行
• 使用 QString::fromStdString 把 std::string 转成 QString

#include <fstream>
#include <QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    // 需要读取文件内容，把文件中的每一行读取出来，作为一个 ComboBox 的选项
    std::ifstream file("D:/config.txt");
    if (!file.is_open()){
        qDebug() << "文件打开失败";
        return;
    }
    // 用 getline 按行读取文本内容
    std::string line;
    while (std::getline(file, line)){
        // 读取到的每一行设置到下拉框中
        ui->comboBox->addItem(QString::fromStdString(line));
    }
    file.close();
}

🌳4) 执行程序, 可以看到文件内容已经被加载到下拉框中.

• Qt 中也提供了 QFile 实现读写文件的功能. 当然使用 C++ 标准库的 std::fstream 也是完全可以的.
• 之所以存在两套, 是因为 Qt 诞生较早 (1991 年左右), 此时 C++ 还没有完成 "标准化" 的工作, C++ 标准库这样的概念自然也没有诞生.
• 因此 Qt 就自己打造了一套库, 实现了字符串, 容器, 文件操作, 多线程, 网络操作, 定时器, 正则表达式等内容.
• (由于 C++ 标准委员会的不作为, 至今仍然有些 Qt 提供的功能, 是标准库不具备的)

4.Spin Box

        使用 QSpinBox 或者 QDoubleSpinBox 表示 "微调框", 它是带有按钮的输入框. 可以用来输入整数/浮点数. 通过点击按钮来修改数值大小.

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, 表示当前的数值.

---

代码示例: 调整书籍借阅系统中的图书数目

🌴1) 在界面上创建下列内容

• 三个下拉框: objectName 为 comboBox 到 comboBox_3
• 三个微调框: objectName 为 spinBox 到 spinBox_3
• 一个按钮: objectName 为 pushButton

🌴2) 编写代码, 修改 widget.cpp, 给下拉框设置初始值.

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    // 初始化下拉框
    ui->comboBox->addItem("战国歧途");
    ui->comboBox->addItem("万历十五年");
    ui->comboBox->addItem("南京大屠杀");
    
    ui->comboBox_2->addItem("浮生六记");
    ui->comboBox_2->addItem("人间词话");
    ui->comboBox_2->addItem("云边有个小卖部");
    
    ui->comboBox_3->addItem("鸳鸯刀");
    ui->comboBox_3->addItem("碧血剑");
    ui->comboBox_3->addItem("侠客行");
    
    // 初始化微调框
    ui->spinBox->setRange(1, 5);
    ui->spinBox->setValue(1);
    ui->spinBox_2->setRange(1, 5);
    ui->spinBox_2->setValue(1);
    ui->spinBox_3->setRange(1, 5);
    ui->spinBox_3->setValue(1);
}

🌴3) 编写代码, 给按钮添加 slot 函数

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();
}

🌴4) 执行程序, 可以看到当用户选择不同的内容时, 点击按钮就能获取到对应的结果. 同时我们也无法输入一些超出范围的非法值.

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(QDateTi me)	时间⽇期任意⼀个改变时触发.

---

代码示例: 实现日期计算器

🌵1) 在界面上创建两个 QDateTimeEdit 和一个按钮, 一个 label

QDateTimeEdit 的 objectName 为 dateTimeEdit_old 和 dateTimeEdit_new

🌵2) 编写计算按钮的 slot 函数

• 使用 daysTo 函数可以计算两个日期的天数.
• 使用 secsTo 函数可以计算两个时间的秒数.
• 通过 (秒数 / 3600) 换算成小时数, 再余上 24 得到零几个小时.
• 使用 QString::number 把整数转成 QString 进行拼接.

void Widget::on_pushButton_clicked()
{
    // 获取到两个时间框的时间日期
    QDateTime timeOld = ui->dateTimeEdit_old->dateTime();
    QDateTime timeNew = ui->dateTimeEdit_new->dateTime();
    // 计算日期差值
    int seconds = timeOld.secsTo(timeNew);
    // 把秒数换算成小时
    int hours = (seconds / 3600) % 24;
    int days = (seconds / 3600) / 24;
    // 设置 local 的内容
    QString text = QString("喜欢你已经持续了 ") + QString::number(days) +
            QString(" 天零 ") + QString::number(hours) + QString(" 个小时！");
    ui->label->setText(text);
}

🌵 3) 执行程序, 观察结果

6.Dial

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

核心属性：

属性	说明
value	持有的数值.
minimum	最⼩值
maximum	最⼤值
singleStep	按下方向键的时候改变的步长.
pageStep	按下 pageUp / pageDown 的时候改变的步长.
sliderPosition	界⾯上旋钮显示的 初始位置
tracking	外观是否会跟踪数值变化. 默认值为 true. ⼀般不需要修改.
wrapping	是否允许循环调整. 即数值如果超过最大值, 是否允许回到最小值. (调整过程能否 "套圈")
notchesVisible	是否显示 刻度线
notchTarget	刻度线之间的相对位置. 数字越大, 刻度线越稀疏.

核心信号：

属性	说明
valueChanged(int)	数值改变时触发
rangeChanged(int, int)	范围变化时触发

---

代码示例: 调整窗口透明度

🌵1) 在界面上创建一个旋钮和一个 label

🌵2) 编写 widget.cpp, 对旋钮初始化

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    // 设置可以循环旋转
    ui->dial->setWrapping(true);
    // 设置刻度线可⻅
    ui->dial->setNotchesVisible(true);
    // 设置最⼤值为
    ui->dial->setMaximum(100);
    // 设置最⼩值为
    ui->dial->setMinimum(0);
    // 设置初始值为
    ui->dial->setValue(100);
}

🌵3) 编写 widget.cpp, 设置旋钮的 valueChanged slot 函数

void Widget::on_dial_valueChanged(int value)
{
    ui->label->setText(QString("当前不透明度为: ") + QString::number(value));
    this->setWindowOpacity((double)value / 100);
}

🌵4) 运行程序, 观察效果. 可以看到随着拖动旋钮旋转, 不透明度发生明显变化.

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)	范围变化时触发

---

代码示例: 调整窗口大小

🌴1) 在界面上创建两个滑动条, 分别是水平和垂直滑动条

objectName 分别为 horizontalSlider 和 verticalSlider

🌴2) 编写代码初始化滑动条

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    ui->horizontalSlider->setMinimum(500);
    ui->horizontalSlider->setMaximum(2000);
    ui->horizontalSlider->setSingleStep(100);
    ui->horizontalSlider->setValue(800);
    
    ui->verticalSlider->setMinimum(500);
    ui->verticalSlider->setMaximum(1500);
    ui->verticalSlider->setSingleStep(100);
    ui->verticalSlider->setValue(600);

    // 翻转朝向, 默认滑块从下向上增⻓, 改成从上往下增⻓.
    //ui->verticalSlider->setInvertedAppearance(true);
}

🌴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) 执行程序, 可以看到调整滑动条, 窗口大小就会随之改变.

---

代码示例: 通过自定义快捷键调整滑动条位置.

• 设置 - 减小 value, 设置 = 增加 value.
• 默认情况下滑动条可以通过 方向键 或者 pageUp / pageDown 调整大小.

🌵1) 在界面上创建滑动条和 label

🌵2) 修改 widget.cpp 构造函数, 增加快捷键

• 使用 QShortCut 类设置快捷键.
• 快捷键触发时, 会发出 QShortcut::activated 信号, 我们连接到自己写的 slot 函数.

#include <QShortcut>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 使用快捷键，需要用到 QShortCut 类
    // 需要两个快捷键，- 进行减少，= 进行增加（= 和 + 是一个按钮）
    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);
}

🌵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 的值了.