【QT】：控件 -- 输入类

1. Line Edit – 单行输入框

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

1.1 录入个人信息

（1）在界面上创建三个输入框和两个单选按钮，一个普通按钮

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

image-20250117210638645

（2）编写 widget.cpp，在构造函数中编写初始化代码，并且给按钮添加 slot 函数

image-20250117211706060

（3）执行程序，可以看到，随着用户输入内容之后，点击 “提交” 按钮 就能 打印到输入的信息：

image-20250117211840171

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

1.2 正则表达式验证输入框数据

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

关于正则表达式

• 正则表达式是一种在计算机中常用的，使用特殊字符描述一个字符串的特征的机制，在进行字符串匹配时非常有用。
• 正则表达式的语法还比较复杂，一般都是随用随查，不需要背下来。

可参考：

正则表达式文档 正则表达式在线工具

（1）在界面上创建输入框和一个按钮

image-20250117213431242

此处的规则：输入框要检查输入的内容是否为合法的手机号码。

• 如果是，则按钮设为可用状态。
• 如果不是，则按钮设为禁用状态。

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

• 使用 QRegExp 创建一个正则表达式对象，"^1\\d{10}$"
• 表示" 表示以 xxx 开头，后面跟着的 1 表示以 1 开头，\d 表示数字，为了在 C++ 字符串中使用，需要写作 \\d，{10} 表示前面的内容重复出现 10 次，\d 数字要重复出现 10 次，$ 表示结尾
• 使用 QRegExpValidator 创建一个验证器对象，Qt 中内置了四个主要的验证器对象。

image-20250117213503620

QRegularExpressionValidator 在匹配性能上做出了一定优化。但是从使用角度讲，和 QRegExpValidator 差别不大，我们使用 QRegExpValidator 即可。

并且给 lineEdit 添加 textEdited 信号的 slot 函数

• on_lineEdit_textEdited 的参数是当前输入框的内容
• 通过 lineEdit->validator() 获取到内置的验证器
• 通过 validate 方法验证文本是否符合要求
• 第一个参数填写的是要验证的字符串 。由于参数要求是 QString& 而不是 const QString&，需要把这个变量复制一下。
• 第二个参数是⼀个 int&，是输出型参数。当验证的字符串不匹配时，返回这个字符串的长度（没有什么实质作用）。
• 返回值是⼀个枚举。 QValidator::Acceptable 表示 验证通过，QValidator::Invalid 表示验证不通过。

image-20250117220313184

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

1.3 验证两次输入密码一致

（1）在界面上创建两个输入框 和 三个 label

image-20250117220655619

（2）编写代码，设置两个输入框的 echoMode 为 Password，并且给两个输入框设置 textEdited slot 函数

• 由于两个槽函数内容一致，我们可以选择 封装一个函数，然后在槽函数内直接调用即可。

image-20250117221357489

执行程序，可以看到当两个输入框内的密码相同时，就会提示密码相同：

image-20250117221434826

1.4 切换显示密码

（1）创建一个输入框和一个复选按钮

image-20250117221754212

（2）修改 widget.cpp，设置输入框的 echoMode 为 Password，并且给 checkBox 添加 slot 函数，代码和结果运行如下：

image-20250117222100072

2. Text Edit – 多行输入框

• QTextEdit 表示多行输入框，也是一个富文本 &markdown 编辑器
• 并且能在内容超出编辑框范围时自动提供滚动条

2.1 获取多行输入框的内容

（1）创建一个多行输入框和一个 label

image-20250117224153898

（2）给多行输入框添加 slot 函数，处理 textChanged 信号

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

image-20250117224229532

• 值得一提的是：这里的获取内容，是会先清空标签内原有内容，再进行写入的

2.2 验证输入框的各种信号

（1）创建多行输入框

image-20250119112544145

（2）给输入框添加以下几个 slot 函数

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

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

void Widget::on_textEdit_selectionChanged()
{
    QTextCursor cursor = ui->textEdit->textCursor();
    qDebug() << "selectChanged: " << 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;
}

（3）执行程序

1. 编写内容时，textChanged 和 cursorPositionChanged 会触发

image-20250119114216046

1. 选中一段文本时，cursorPositionChanged、selectChanged、copyAvailable 会触发

image-20250119114444488

1. 按下 Ctrl + Z 时，textChanged、undoAvailable、redoAvailable、cursorPositionChanged 会触发!

image-20250119114535884

1. 按下 Ctrl + Y，textChanged、undoAvailable、redoAvailable、cursorPositionChanged 会触发

image-20250119114648823

3. Combo Box – 下拉框

3.1 下拉框模拟点餐

（1）在界面上创建两个下拉框和一个按钮

image-20250119115719698

（2）编写 widget.cpp，初始化两个下拉框的内容，或者也可以选择直接在 ui 界面添加选项内容

image-20250119120517217

（3）编写 widget.cpp，给按钮添加 slot 函数，执行程序，在点击确定按钮时，就能获取到当前下拉框中选中的内容：

image-20250119120638859

3.2 从文件中加载下拉框的选项

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

（1）在界面上创建一个下拉框

image-20250119121032660

（2）在当前文件目录下创建文件 animal.txt，编写选项，每个选项占一行

image-20250119121228182

（3）修改 widget.cpp，从文件中读取选项，执行程序就可以看到文件内容已经被加载到下拉框中

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

image-20250119121648180

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

4. Spin Box – 微调框

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

• 由于 SpinBox 和 QDoubleSpinBox 用法基本相同，就只介绍 SpinBox 的使用了

image-20250119122924659

Spin 英文原意为 “旋转”，此处引申成 “微调”

• 事实上很多术语在翻译的时候，不一定非要按照原始的翻译来表示，更追求的是 “信达雅”。
• 举例：地铁上的 “Priority Seat” 会翻译成 “爱心专座”，而不是 “优先座位”。

调整麦当劳购物车中的份数

（1）在界面上创建下列内容

• 两个下拉框：objectName 为 comboBox 到 comboBox_2
• 两个微调框：objectName 为 spinBox 到 spinBox_2
• 一个按钮：objectName 为 pushButton

image-20250119133145630

（2）编写代码，修改 widget.cpp，给下拉框设置初始值，给按钮添加 slot 函数，执行程序，可以看到当用户选择不同的内容时，点击按钮就能获取到对应的结果

image-20250119133954680

• 注意：上面即使我们给了个 7.5，但是最多也就到 6，说明这里无法输入一些超出范围的非法值

5. Date Edit & Time Edit

使用 QDateEdit 作为日期的微调框：

img

使用 QTimeEdit 作为时间的微调框：

img

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

img

关于本地时间（LocalTime）和协调世界时（UTC）

UTC 时间是一个基于原子钟的标准时间，不受地球的自转周期影响，和格林威治时间（GMT）是非常接近的，科学家会通过精密的设备来测量并维护。

• 我们的计算机内部使用的时间就是基于 UTC 时间
• 本地时间则是基于不同的时区，对 UTC 时间做出了一些调整
• 比如咱们使用的北京时间，位于 “东八区”，就需要在 UTC 时间基础上 + 8 个小时的时差

日期计算器

（1）在界面上创建两个 QDateTimeEdit 和一个按钮，一个 label，QDateTimeEdit 的 objectName 为 dateTimeEdit_old 和 dateTimeEdit_new!

image-20250119140459784

（2）编写计算按钮的 slot 函数，然后再执行程序

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

image-20250119141806991

6. Dial – 按钮

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

image-20250119141853492

调整窗口透明度

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

image-20250119143315825

2）对旋钮进行初始化，然后编写 widget.cpp，设置旋钮的 valueChanged slot 函数，运行程序

image-20250119143506834

• 观察效果，可以看到随着拖动旋钮旋转，不透明度发生明显变化

7. Slider – 滑动条

image-20250119143523603

• QSlider 和 QDial 都是继承自 QAbstractSlider，因此用法上基本相同。

调整窗口大小

（1）在界面上创建两个滑动条，分别是水平和垂直滑动条

objectName 分别为 horizontalSlider(水平) 和 verticalSlider(垂直)

image-20250119145109420

（2）编写代码初始化滑动条 和 滑动条的 valueChanged slot 函数

image-20250119145038950

（4）执行程序

可以看到调整滑动条，窗口大小就会随之改变：

通过自定义快捷键调整滑动条位置

设置 - 减小 value，设置 = 增加 value

• 默认情况下滑动条可以通过方向键或者 pageUp / pageDown 调整大小。

（1）在界面上创建滑动条和 label

image-20250119145351719

（2）修改 widget.cpp 构造函数，增加快捷键，创建 valueChanged 的 slot 函数

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

image-20250119150703887

（3）编写自定义 slot 函数，并且执行程序，观察效果，可以看到此时按下 - 和 = 就可以调整 value 的值了：

image-20250119150740696

• 核心属性：定义 初始设置 & 槽函数的 应答调用
• 核心信号：实现 触发转接（中间过程的）