【Qt】控件概述（4）—— 输出类控件

初阳7852024-10-07 18:51

输出类控件

  • [1. QLineEdit------单行输入框](#1. QLineEdit——单行输入框)
  • [2. QTextEdit------多行输入框](#2. QTextEdit——多行输入框)
  • [3. QComboBox------下拉框](#3. QComboBox——下拉框)
  • [4. QSpinBox------微调框](#4. QSpinBox——微调框)
  • [5. QDateEdit && QTimeEdit && QDateTimeEdit](#5. QDateEdit && QTimeEdit && QDateTimeEdit)
  • [6 QDial------旋钮](#6 QDial——旋钮)
  • [7. QSlider------滑动条](#7. QSlider——滑动条)

1. QLineEdit------单行输入框

QLineEdit是一个单行的输入框，可以进行输入，但是不能进行换行，只能输入一样内容。

核心属性：

属性 说明
text 输入框中的文本
inputMask 输⼊内容格式约束
maxLength 最大长度
frame 是否添加边框
echoMode 显示方式.1：QLineEdit::Normal ：这是默认值，文本框显示输⼊的文本。2：QLineEdit::Password ：在这种模式下，输入的字符会被隐藏，通常用星号（*）或等号（=）代替。3：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是新的文本。代码对文本的修改不能触发这个信号.
c 复制代码 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 设置姓名输入框
    ui->lineEdit_name->setPlaceholderText("请输入名称：");
    ui->lineEdit_name->setClearButtonEnabled(true);

    // 设置电话输入框
    ui->lineEdit_phone->setPlaceholderText("请输入电话：");
    // 设置电话输入格式
    ui->lineEdit_phone->setInputMask("000-0000-0000");
    ui->lineEdit_phone->setClearButtonEnabled(true);

    // 设置密码输入框
    ui->lineEdit_password->setPlaceholderText("请输入密码：");
    ui->lineEdit_password->setEchoMode(QLineEdit::Password);
    ui->lineEdit_password->setClearButtonEnabled(true);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::on_pushButton_clicked()
{
    QString male = ui->radioButton_male->isEnabled() ? "男" : "女";
    qDebug() << "姓名" << ui->lineEdit_name->text()
             << "性别：" << male
             << "电话：" << ui->lineEdit_phone->text()
             << "密码：" << ui->lineEdit_password->text();
}


代码样例1 ：使用正则表达式实现规定电话输入格式

正则表达式是一种计算机中常用到的技术，使用特殊字符来描述一串字符特征机制。

参考文档：

正则表达式文档：https://learn.microsoft.com/zh-cn/powershell/module/microsoft.powershell.core/about/about_regular_expressions?view=powershell-7.4

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

  1. 使用QRegExp创建一个正则表达式对象
  2. 使用QRegExpValidator创建一个验证器对象，Qt中内置了四个主要的验证器对象
  1. 给lineEdit创建一个槽函数
  2. 通过lineEdit->validator()获取到内置的验证器
  3. 通过validate方法验证文本是否符合条件，涉及到两个参数，一个是QString&这里没有const，因为槽函数的中的字符串是带const所以这里我们要二外进行处理，另一个是int&是一个输出型参数，当验证字符串不匹配时，返回不匹配的下标。validate返回的是一个枚举QValidator::Acceptable表示验证通过，QValidator::Invalid表示验证失败。
c 复制代码 
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}$")));
}

Widget::~Widget()
{
    delete ui;
}

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

上述的正则表达式"^1\d{10}$"

  • ^+1的表示是数字1开头
  • \d表示数字，这里为了迎合C++的转所以使用\ \
  • {10}使用花括号包起来的数字表示可以重复10次
  • $表示结束符号


代码样例2：验证两次密码输入一致

c 复制代码 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 一开始设置按钮为禁用状态，只有两次密码相同后才可以启用
    ui->pushButton->setEnabled(false);

    // 设置来个lineEdit的方式为Password
    ui->lineEdit->setEchoMode(QLineEdit::Password);
    ui->lineEdit_2->setEchoMode(QLineEdit::Password);

    // 设置label
    ui->label->setText("请输入一样的密码");
}

Widget::~Widget()
{
    delete ui;
}

void Widget::on_lineEdit_2_textEdited(const QString &arg1)
{
    QString password = ui->lineEdit->text();
    if (password == arg1){
        ui->pushButton->setEnabled(true);
        ui->label->setText("验证成功，可以进行提交");
    }else{
        ui->pushButton->setEnabled(false);
        ui->label->setText("密码不一致，其重新输入");
    }
}

同时我们还可以添加一个显示密码的功能。

c 复制代码 
void Widget::on_checkBox_toggled(bool checked)
{
    if(checked){
        ui->lineEdit->setEchoMode(QLineEdit::Normal);
    }else{
        ui->lineEdit->setEchoMode(QLineEdit::Password);
    }
}

void Widget::on_checkBox_2_toggled(bool checked)
{
    if(checked){
        ui->lineEdit_2->setEchoMode(QLineEdit::Normal);
    }else{
        ui->lineEdit_2->setEchoMode(QLineEdit::Password);
    }
}

2. QTextEdit------多行输入框

QTextEdit表示多行输入框，可以支持富文本输入和MarkDown，并且可以在超出文本框时添加滚轮。

核心属性：

属性 说明
toPlainText 获取文本内容
textCursor 获取鼠标选中的内容，返回一个QTextCursor类，该类中selectedText获取鼠标选中的字符，position获取光标的位置。
markdown 输入框内持有的内容.支持markdown格式.能够自动的对markdown文本进渲染成html，html 输入框内持有的内容.可以支持大部分html标签.包括img和table等.
placeHolderText 输入框为空时提示的内容.
readOnly 是否是只读的
undoRedoEnable 是否开启undo/redo功能.按下ctrl+z触发undo，按下ctrl+y触发redo
autoFormating 开启自动格式化.
tabstopWidth 按下缩进占多少空间
overwriteMode 是否开启覆盖写模式
acceptRichText 是否接收富文本内容
verticalScrollBarPolicy 垂直方向滚动条的出现策略1：Qt::ScrollBarAsNeeded :根据内容自动决定是否需要滚动条。这是默认值。2：Qt::ScrollBarAlwaysOff :总是关闭滚动条。3：Qt::ScrollBarAlwaysOn :总是显示滚动条。
horizontalScrollBarPolicy 水平方向滚动条的出现策略1：Qt::ScrollBarAsNeeded :根据内容自动决定是否需要滚动条。这是默认值。2：Qt::ScrollBarAlwaysOff :总是关闭滚动条。3：Qt::ScrollBarAlwaysOn :总是显示滚动条。

核心信号

信号 说明
textChanged() 文本内容改变时触发
selectionChanged() 选中范围改变时触发
cursorPositionChanged() 光标移动时触发
undoAvailable(bool) 可以进行undo操作时触发
redoAvailable(bool) 可以进行redo操作时触发
copyAvaiable(bool) 文本被选中/取消选中时触发
c 复制代码 
void Widget::on_textEdit_textChanged()
{
    const QString& content = ui->textEdit->toPlainText();
    qDebug() << content;
}

代码样例：使用剩余的信号：

c 复制代码 
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_redoAvailable(bool b)
{
    qDebug() << "[redoAvailable]:" << b;
}

void Widget::on_textEdit_undoAvailable(bool b)
{
    qDebug() << "[undoAvailable]:" << b;
}

void Widget::on_textEdit_copyAvailable(bool b)
{
    qDebug() << "[copyAvailable]:" << b;
}

3. 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时有效)

代码样例：添加选项

c 复制代码 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->comboBox->addItem("选项一");
    ui->comboBox->addItem("选项二");
    ui->comboBox->addItem("选项三");
}

void Widget::on_comboBox_currentIndexChanged(const QString &arg1)
{
    qDebug() << arg1;
}

void Widget::on_comboBox_activated(const QString &arg1)
{
    qDebug() << arg1;
}

代码样例：从文件中读取

c 复制代码 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    std::ifstream file("C:/Users/chuyang/Desktop/config.txt");
    if (!file.is_open()){
        qDebug() << "open file error";
    }
    std::string line;
    while (std::getline(file, line)){
        ui->comboBox->addItem(QString::fromStdString(line));
    }
}

4. QSpinBox------微调框

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

QSpinBox的关键属性：

属性 说明
value 存储的数值
setRange 设置范围
singleStep 每次调整的"步长".按下⼀次按钮数据变化多少.
displayInteger 数字的进制.例如displayInteger设为10,则是按照10进制表示.设为2则为2进制；
minimum 最小值
maximum 最大值
suffix 后缀
prefix 前缀
wrapping 是否允许换行
frame 是否带边框
alignment 文字对齐方式.
readOnly 是否允许修改
buttonSymbol 按钮上的图标.1：UpDownArrows 上下箭头形式。2：PlusMinus 加减号形式。3：NoButtons 没有按钮
accelerated (加速的) 按下按钮时是否为快速调整模式
correctionMode 输⼊有误时如何修正。1：QAbstractSpinBox::CorrectToPreviousValue :如果用户输入了⼀个无效的值（例如，在只能显示正整数的SpinBox中输⼊了负数），那么SpinBox会恢复为上⼀个有效值。例如，如果SpinBox的初始值是1，用户输⼊了-1（无效），然后SpinBox会恢复为1。2：QAbstractSpinBox::CorrectToNearestValue :如果用户输⼊了⼀个无效的值，SpinBox会恢复为最接近的有效值。例如，如果SpinBox的初始值是1，用户输⼊了-1（无效），那么SpinBox会恢复为0。
keyboardTrack 是否开启键盘跟踪.设为true,每次在输⼊框输⼊⼀个数字,都会触发⼀次valueChanged()和textChanged()信号.设为false,只有在最终按下enter或者输⼊框失去焦点,才会触发valueChanged()和textChanged()信号.

核心信号

信号 说明
textChanged(QString) 微调框的文本发生改变时会触发.参数QString带有前缀和后缀.
valueChanged(int) 微调框的⽂本发⽣改变时会触发.参数int,表⽰当前的数值.
c 复制代码 
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("选项1");
    ui->comboBox_2->addItem("选项2");
    ui->comboBox_2->addItem("选项3");

    ui->comboBox_3->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);
}

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. QDateEdit && QTimeEdit && QDateTimeEdit

使用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的偏移量(时差).

核心信号：

信号 说明
dateChanged(QDate) 日期改变时触发.
timeChanged(QTime) 时间改变时触发.
dateTimeChanged(QDateTime) 时间日期任意⼀个改变时触发.

代码显示：实现两个日期之间的天数计算

c 复制代码 
void Widget::on_pushButton_clicked()
{
    QDateTime oldtime = ui->dateTimeEdit->dateTime();
    QDateTime newtime = ui->dateTimeEdit_2->dateTime();

    int days = oldtime.daysTo(newtime); // Qt中提供了计算天数和秒数的函数，
    // 但是这里不建议使用daysTo因为从文档中我们可以发现不到一天的时间但是跨天的也算一天
    // 所以如果要算准确的时间建议使用
    // int hours = (oldtime.secsTo(newtime) / 3600) / 24;
    int hours = (oldtime.secsTo(newtime) / 3600) % 24;

    QString text = QString("oldtime距离newtime  ") + QString::number(days) +
    QString(" 天 零 ")
     + QString::number(hours) + QString(" 个⼩时!");
     ui->label->setText(text);
}

6 QDial------旋钮

核心属性：

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

核心信号

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

代码样例：通过旋转调整窗口的不透明度

c 复制代码 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->dial->setRange(0, 100);
    // 设置允许循环
    ui->dial->setWrapping(true);
    // 设置刻度线
    ui->dial->setNotchesVisible(true);
    // 设置刻度线的刻度
    ui->dial->setNotchTarget(3.7);
}

void Widget::on_dial_valueChanged(int value)
{
    this->setWindowOpacity((double)value / 100);
}

7. QSlider------滑动条

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

核心属性：

属性 说明
value 持有的数值.
minimum 最小值
maximum 最大值
singleStep 按下方向键的时候改变的步长
pageStep 按下pageUp/pageDown的时候改变的步长
sliderPosition 滑动条显示的初始位置
tracking 外观是否会跟踪数值变化.默认值为true.⼀般不需要修改.
orientation 滑动条的方向是水平还是垂直
invertedAppearance 是否要翻转滑动条的方向
tickPosition 刻度的位置.
tickInterval 刻度的密集程度.

核心信号

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

代码样例：通过滑动条改变窗口大小

c 复制代码 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->horizontalSlider->setMinimum(500);
    ui->horizontalSlider->setMaximum(2000);
    ui->horizontalSlider->setSingleStep(50);

    ui->verticalSlider->setMinimum(500);
    ui->verticalSlider->setMaximum(1500);
    ui->verticalSlider->setSingleStep(50);
}

void Widget::on_horizontalSlider_valueChanged(int value)
{
    QRect rect = this->geometry();
    this->setGeometry(rect.x(), rect.y(), value, rect.height());
}

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

代码样例：实现自定义快捷键

c 复制代码 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
	// 设置滑块的属性
    ui->setupUi(this);
    ui->horizontalSlider->setRange(0, 100);
    ui->horizontalSlider->setSingleStep(5);
    ui->horizontalSlider->setValue(0);
	
	// 创建快捷键
    QShortcut* shortcut1 = new QShortcut(this);
    QShortcut* shortcut2 = new QShortcut(this);
    shortcut1->setKey(QKeySequence("-"));
    shortcut2->setKey(QKeySequence("="));
    // 连接槽函数
    connect(shortcut1, &QShortcut::activated, this, &Widget::subvalue);
    connect(shortcut2, &QShortcut::activated, this, &Widget::addValue);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::subvalue()
{
    int value = ui->horizontalSlider->value();
    qDebug() << value;
    if (value >= ui->horizontalSlider->minimum()){
        ui->horizontalSlider->setValue(value - 5);
    }
}

void Widget::addValue()
{
    int value = ui->horizontalSlider->value();
    qDebug() << value;
    if (value <= ui->horizontalSlider->maximum()){
        ui->horizontalSlider->setValue(value + 5);
    }
}

void Widget::on_horizontalSlider_valueChanged(int value)
{
    ui->label->setText(QString::number(value));
}
相关推荐
一二小选手2 分钟前
【Java Web】分页查询
java·开发语言
大G哥2 分钟前
python 数据类型----可变数据类型
linux·服务器·开发语言·前端·python
Code成立17 分钟前
《Java核心技术 卷I》用户图形界面鼠标事件
java·开发语言·计算机外设
Xiao Fei Xiangζั͡ޓއއ36 分钟前
一觉睡醒，全世界计算机水平下降100倍，而我却精通C语言——scanf函数
c语言·开发语言·笔记·程序人生·面试·蓝桥杯·学习方法
记录无知岁月39 分钟前
【MATLAB】目标检测初探
开发语言·yolo·目标检测·matlab·yolov3·yolov2
对愁眠1 小时前
【鸣潮，原神PC端启动器】仿二次元手游PC端游戏启动器，以鸣潮为例。
qt·c/c++
远望清一色1 小时前
基于MATLAB身份证号码识别
开发语言·图像处理·算法·matlab
NMBG221 小时前
[JAVAEE] 面试题(四) - 多线程下使用ArrayList涉及到的线程安全问题及解决
java·开发语言·面试·java-ee·intellij-idea
Py小趴1 小时前
Python自学之Colormaps指南
开发语言·python·数据可视化
晒足以百八十1 小时前
基于Python 和 pyecharts 制作招聘数据可视化分析大屏
开发语言·python·信息可视化
热门推荐
01玄机平台应急响应—webshell查杀02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04智能车联网安全发展形势、挑战05文件或文件夹名称中有空格如何批量去除06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10液体神经网络：LNN是个啥概念？