【QT控件】输入类控件详解

目录

一、QLineEdit

二、Text Edit

三、Combo Box

四、Spin Box

五、Date Edit & Time Edit

六、Dial

七、Slider

QT专栏：QT_uyeonashi的博客-CSDN博客

一、QLineEdit

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

核心属性

核心信号

代码示例: 录入个人信息
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_password->setClearButtonEnabled(true);
    // 验证手机号码必须是 11 位数字. 并且按照 "344" 的格式来输入.
    ui->lineEdit_phone->setInputMask("000-0000-0000");
}

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

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

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

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

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

⚽ 关于正则表达式
正则表达式是一种在计算机中常用的, 使用特殊字符描述一个字符串的特征的机制. 在进行字符串匹配时非常有用.
正则表达式的语法还比较复杂, 一般都是随用随查, 不需要背下来.
参考:
正则表达式文档：正则表达式语法 | Microsoft Learn
正则表达式在线工具: https://regextester.buyaocha.com/

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

2) 编写 widget.cpp, 把按钮初始 enabled 设为 false. 给输入框添加验证器.
• 使用 QRegExp 创建一个正则表达式对象. "^1\\d{10}$" 表示 "以 1 开头, 后面跟上任意的10个十进制数字".
• 使用 QRegExpValidator 创建一个验证器对象. Qt 中内置了四个主要的验证器对象.

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

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}$")));
}

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

void Widget::on_lineEdit_textEdited(const QString &arg1)
{
    qDebug() << 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);
    }
}

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

代码示例: 验证两次输入的密码一致
1) 在界面上创建两个输入框和一个 label

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

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->lineEdit->setEchoMode(QLineEdit::Password);
    ui->lineEdit_2->setEchoMode(QLineEdit::Password);
}

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

void Widget::on_lineEdit_textEdited(const QString &arg1)
{
    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("两次输入的密码不同!");
}

void Widget::on_lineEdit_2_textEdited(const QString &arg1)
{
    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)
        ui->lineEdit->setEchoMode(QLineEdit::Normal);
    else 
        ui->lineEdit->setEchoMode(QLineEdit::Password);
}

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

二、Text Edit

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

核心属性

核心信号

代码示例: 获取多行输入框的内容
1) 创建一个多行输入框和一个label

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

void Widget::on_textEdit_textChanged()
{
    const QString& content = ui->textEdit->toPlainText();
    qDebug() << content;
    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) 执行程序, 观察结果.
可以看到:
1. 编写内容时, textChanged 和 cursorPositionChanged 会触发

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

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

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

三、Combo Box

QComboBox 表示下拉框.

核心属性

核心方法

核心信号

代码示例: 使用下拉框模拟麦当劳点餐
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_2->addItem("薯条");
    ui->comboBox_2->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) 创建文件 config.txt  放在桌面上 , 编写选项. 每个选项占一行.
形如:

胡桃
雷电将军
宵宫
神里绫华
八重神子
芙宁娜

3) 修改 widget.cpp, 从文件中读取选项.
• 使用 ifstream 打开文件
• 使用 getline 读取每一行
• 使用 QString::fromStdString 把 std::string 转成 QString

#include "widget.h"
#include "ui_widget.h"
#include <fstream>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    std::ifstream file("C:/Users/29495/Desktop/config.txt");
    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 提供的功能, 是标准库不具备的)

四、Spin Box

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

Spin 英文原意为 "旋转". 此处引申成 "微调".
事实上很多术语在翻译的时候, 不一定非要按照原始的翻译来表示, 更追求的是 "信达雅".
举个例子, 地铁上的 "Priority Seat" 会翻译成 "爱心专座", 而不是 "优先座位".

QSpinBox 关键属性

核心信号

代码示例: 调整麦当劳购物车中的份数.
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_2->addItem("薯条");
    ui->comboBox_2->addItem("麦辣鸡翅");
    ui->comboBox_3->addItem("可乐");
    ui->comboBox_3->addItem("雪碧");

    // 初始化微调框
    ui->spinBox->setValue(1);
    ui->spinBox->setRange(1, 5);
    ui->spinBox_2->setValue(1);
    ui->spinBox_2->setRange(1, 5);
    ui->spinBox_3->setValue(1);
    ui->spinBox_3->setRange(1, 5);
}

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

五、Date Edit & Time Edit

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

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

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

这几个控件用法非常相似, 我们以 QDateTimeEdit 为例进行介绍.

QDateTimeEdit 核心属性

🥛 关于 本地时间(LocalTime) 和 协调世界时(UTC)
UTC 时间是一个基于原子钟的标准时间. 不受地球的自转周期影响. 和格林威治时间 (GMT) 是非常接近的. 科学家会通过精密的设备来测量并维护.
咱们的计算机内部使用的时间就是基于 UTC 时间.
本地时间则是基于不同的时区, 对 UTC 时间做出了一些调整. 比如咱们使用的北京时间, 位于"东八区", 就需要在 UTC 时间基础上 +8 个小时的时差.

核心信号

代码示例: 实现日期计算器
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 days = timeOld.daysTo(timeNew);
    int hours = (timeOld.secsTo(timeNew) / 3600) % 24;

    // 设置 label 的内容
    QString text = QString("爱你已经持续了 ") + QString::number(days) +
    QString(" 天 零 ") + QString::number(hours) + QString(" 个小时!");
    ui->label->setText(text);
}

3) 执行程序, 观察结果

六、Dial

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

核心属性

核心信号

代码示例: 调整窗口透明度
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) 运行程序, 观察效果. 可以看到随着拖动旋钮旋转, 不透明度发生明显变化.

七、Slider

使用 QSlider 表示一个滑动条.

🏝 QSlider 和 QDial 都是继承自 QAbstractSlider , 因此用法上基本相同.

核心属性

核心信号

代码示例: 调整窗口大小
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)
{
    QRect rect = this->geometry();
    this->setGeometry(rect.x(), rect.y(), value, rect.height());
    qDebug() << value;
}

void Widget::on_verticalSlider_valueChanged(int value)
{
    QRect rect = this->geometry();
    this->setGeometry(rect.x(), rect.y(), rect.width(), value);
    qDebug() << value;
}

4) 执行程序, 可以看到调整滑动条, 窗口大小就会随之改变.

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

2) 编写初始化代码

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

    ui->label->setText("");
    ui->horizontalSlider->setMinimum(0);
    ui->horizontalSlider->setMaximum(100);
    ui->horizontalSlider->setSingleStep(10);
    ui->horizontalSlider->setValue(0);
}

3) 创建 valueChanged 的 slot 函数

void Widget::on_horizontalSlider_valueChanged(int value)
{
    ui->label->setText(QString::number(value));
}

4) 修改 widget.cpp 构造函数, 增加快捷键
• 使用 QShortCut 类设置快捷键.
• 快捷键触发时, 会发出 QShortcut::activated 信号, 我们连接到自己写的 slot 函数.

// 设置快捷键
QShortcut* shortCut1 = new QShortcut(this);
shortCut1->setKey(QKeySequence("-"));
connect(shortCut1, &QShortcut::activated, this, &Widget::subValue);

QShortcut* shortCut2 = new QShortcut(this);
shortCut2->setKey(QKeySequence("="));
connect(shortCut2, &QShortcut::activated, this, &Widget::addValue);

 5) 编写自定义 slot 函数

void Widget::subValue() 
{
    int value = ui->horizontalSlider->value();
    ui->horizontalSlider->setValue(value - 20);
}

void Widget::addValue() 
{
    int value = ui->horizontalSlider->value();
    ui->horizontalSlider->setValue(value + 20);
}

6) 执行程序, 观察效果. 可以看到此时按下 - 和 = 就可以调整 value 的值了.

本篇完！