【Qt】输入类控件 QLineEdit、QTextEdit、QComboBox、QSpinBox、QDateTimeEdit、QDial、QSlider

一. 单行输入框：QLineEdit

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

核心属性如下：

核心信号如下：

代码：录入个人信息

在界面上创建三个输入框和两个单选按钮，一个普通按钮。三个输入框的 objectName 为 lineEdit_name，lineEdit_password，lineEdit_phone，两个单选按钮的 objectName 为 radioButton_male，radioButton_female，按钮的 objectName 为 pushButton_submit，如下：

编写 widget.cpp，给按钮添加点击的 slot 函数，运行程序可以看到，随着用户输入内容之后，点击按钮，就能打印到输⼊的信息，如下：

注意：inputMask 只能进行简单的输入格式校验，实际开发中，基于 “正则表达式” 的方式是更核心的方法。

• 正则表达式：一种在计算机中常用的，使用特殊字符描述一个字符串的特征的机制，在进行字符串匹配时非常有用。
• 正则表达式文档：https://learn.microsoft.com/zh-cn/previous-versions/visualstudio/visual-studio-2008/ae5bf541(v=vs.90)?redirectedfrom=MSDN
• 正则表达式在线工具：https://regextester.buyaocha.com/
• 此处要求在输入框中输入一个合法的电话号码 (1 开头，11 位，全都是数字)，如果验证不通过，则确定按钮无法点击。
  • 正则表达式的语法还比较复杂，一般都是随用随查，而不需要背下来。

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

在界面上创建输入框和一个按钮，如下：

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

• 使用 QRegExp 创建一个正则表达式对象 "^1\\d{10}$" 表示 “以 1 开头，后面跟上任意的 10 十进制数字”。
• 使用 QRegExpValidator 创建一个验证器对象，这里只是注册了一个验证器，具体验证器怎么使用，还需要其他代码来完成。

编写 widget.cpp，给 lineEdit 添加 textEdited 信号的 slot 函数，执行程序后，可以看到此时尝试输入字母是无法输入的，并且只有当输入的内容符合要求，确定按钮才能被使用，如下：

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

代码：验证两次输入的密码一致

在界面上创建两个输入框和一个 label，如下：

编写 widget.cpp，设置两个输入框的 echoMode 为 Password，给两个输入框设置 textEdited 信号对应的 slot 函数，执行程序后，可以看到当两个输入框内的密码相同时，就会提示密码相同，如下：

注意：若不加上 void(arg1) 时，编译器会出现警告，加上就是类型转换，这个写法对于代码的实际逻辑是没有任何影响的，同时可以 “骗过编译器”，警告就没了。

代码：切换显示密码

创建一个输入框和一个复选按钮，如下：

修改 widget.cpp，设置输入框的 echoMode 为 Password，给 checkBox 添加 toggled 信号的槽函数 (选中/未选中，这两种状态改变时，就会触发信号，执行槽函数)，执行程序，可以看到切换复选框的状态，就可以控制输入框显示密码，如下：

二. 多行输入框：QTextEdit

• QPlainEdit 表示多行输入框，但是只能表示纯文本。
• QTextEdit 表示多行输入框，不仅能表示纯文本，也能表示富文本、markdown 编辑器，并且能在内容超出编辑框范围时自动提供滚动条。

核心属性如下：

核心信号如下：

代码：获取多行输入框的内容

创建一个多行输入框和一个label，如下：

给多行输入框添加 textChanged 信号对应的 槽函数，执行程序后，可以看到当输入框中的内容发生变化时，label 中的内容同步发生改变，如下：

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

代码：验证输入框的各种信号

创建多行输入框，如下：

给输入框添加以下几个 slot 函数，如下：

执行程序，观察结果可以看到：

• 编写内容时，undoAvailable、cursorPositionChanged、textChanged 会触发：

• 选中一段文本时，cursorPositionChanged、selectionChanged、copyAvailable 会触发：

• 按下 ctrl+z 时，cursorPositionChanged、copyAvailable、selectionChanged、textChanged、undoAvailable、redoAvailable、cursorPositionChanged 会触发：

• 按下 ctrl+y 时，cursorPositionChanged、textChanged、undoAvailable、redoAvailable 会触发：

三. 下拉框：QComboBox

QComboBox 表示下拉框。

核心属性如下：

核心方法如下：

核心信号如下：

代码：使用下拉框模拟麦当劳点餐

在界面上创建三个下拉框，和一个按钮，如下：

编写 widget.cpp，初始化三个下拉框的内容，给按钮添加点击对应的槽函数，执行程序可以看到，在点击确定按钮时，就能获取到当前下拉框中选中的内容，如下：

注意：添加选项时，也可以右击鼠标，点击 “编辑项目” 就可以进行新增选项了。

代码：从文件中加载下拉框的选项

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

在界面上创建一个下拉框，如下：

创建文件 D:\config.txt 编写选项，每个选项占一行，如下：

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

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

四. 微调框：QSpinBox

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

• 由于 QSpinBox 和 QDoubleSpinBox 用法基本相同，这里只介绍 QSpinBox 的使用。
• Spin 英文原意为 “旋转”，此处引申成 “微调”。

QSpinBox 核心属性如下：

核心信号如下：

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

在界面上创建下列内容，通过下拉框来选择食物的种类，通过微调框来选择食物的数量，如下：

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

修改 widget.cpp，给下拉框设置初始值，给按钮添加点击对应的槽函数，执行程序后，可以看到当用户选择不同的内容时，点击按钮就能获取到对应的结果，同时我们也无法输入一些超出范围的非法值，如下：

五. 日期时间：QDateTimeEdit

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

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

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

这几个控件用法非常相似，以 QDateTimeEdit 为例进行介绍：

QDateTimeEdit 核心属性如下：

核心信号如下：

代码：实现日期计算器

在界面上创建两个 QDateTimeEdit 和一个按钮，一个 label，QDateTimeEdit 的 objectName 为 dateTimeEdit_old 和 dateTimeEdit_new，如下：

修改 widget.cpp，编写点击计算按钮对应的槽函数，执行程序后，结果如下：

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

六. 旋钮：QDial

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

核心属性如下：

核心信号如下：

代码：调整窗口的不透明度 (opacity)

在界面上创建一个旋钮和一个 label，如下：

修改 widget.cpp，对旋钮初始化，同时设置旋钮的 valueChanged 信号对应的槽函数，运行程序后，可以看到随着拖动旋钮旋转，不不透明度发生明显变化，如下：

七. 滑动条：QSlider

• 使用 QSlider 表示一个滑动条。
• QSlider 和 QDial 都是继承自 QAbstractSlider，因此用法上基本相同。

核心属性如下：

核心信号如下：

代码：调整窗口大小

在界面上创建两个滑动条，分别是水平和垂直滑动条，objectName 分别为 horizontalSlider 和 verticalSlider，如下：

修改 widget.cpp 初始化滑动条，编写滑动条的 valueChanged 信号对应的槽函数，执行程序后，可以看到调整滑动条，窗口大小就会随之改变，如下：

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

在界面上创建滑动条和 label，如下：

修改 widget.cpp 构造函数，创建 valueChanged 信号对应的槽函数，增加快捷键，执行程序后，可以看到此时按下 -/+ 就可以调整 value 的值了，如下：

• 使用 QShortCut 类设置快捷键。
• 快捷键触发时，会发出 QShortcut::activated 信号，我们连接到自己写的槽函数即可。
• 按下 - 减小 value，按下 + 增加 value
• 默认情况下滑动条可以通过 方向键 或者 pageUp/pageDown 调整大小。