[Qt的学习日常]--常用控件3

前言

作者：小蜗牛向前冲

名言：我可以接受失败，但我不能接受放弃

如果觉的博主的文章还不错的话，还请点赞，收藏，关注👀支持博主。如果发现有问题的地方欢迎❀大家在评论区指正

一、显示类控件

1、Label

2、LCD Number

3、ProgressBar

4、Calendar Widget

二、输出类控件

1、QLineEdit

2、TextEdit

3、ComboBox

4、其他核心输出控件

本期：主要学习输入和输出控件

一、显示类控件

1、Label

Qt中，QLabel 是一个用于显示文本或图像的控件。它常用于创建静态文本标签、图片显示或在UI中展示非交互内容。

核⼼属性如下

属性	说明
text	QLabel中的⽂本
textFormat	⽂本的格式. • Qt::PlainText 纯⽂本 • Qt::RichText 富⽂本(⽀持html标签) • Qt::MarkdownText markdown格式 • Qt::AutoText 根据⽂本内容⾃动决定⽂本格式.
pixmap	QLabel 内部包含的图⽚.
scaledContents	设为true表⽰内容⾃动拉伸填充 QLabel 设为false则不会⾃动拉伸
alignment	对⻬⽅式. 可以设置⽔平和垂直⽅向如何对⻬.
wordWrap	设为true内部的⽂本会⾃动换⾏. 设为false则内部⽂本不会⾃动换⾏.
indent	设置⽂本缩进.⽔平和垂直⽅向都⽣效.
margin	内部⽂本和边框之间的边距. 不同于于indent,但是是上下左右四个⽅向都同时有效. ⽽indent最多只是两个⽅向有效(具体哪两个⽅向有效取决于alignment)
openExternalLinks	是否允许打开⼀个外部的链接. (当QLabel⽂本内容包含url的时候涉及到)
buddy	给QLabel关联⼀个"伙伴",这样点击QLabel时就能激活对应的伙伴. 例如伙伴如果是⼀个QCheckBox,那么该QCheckBox就会被选中.

显示图片：

在ui设计中，使用一个label控件

在widget.cpp中编写

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//设置label和窗口一样大ui->label->setGeometry(0,0,800,600);QPixmap pixmap(":/qt.png");ui->label->setPixmap(pixmap);//设置内容伸缩ui->label->setScaledContents(true);//但是我们拖动窗口，图片的大小不会和窗口大小进行变动}void Widget::resizeEvent(QResizeEvent *event)
{// 可以直接通过 this->width() 和 this->height() 设置 label 新的尺⼨, 也可以通event 参数拿到新的尺⼨.ui->label->setGeometry(0, 0, this->width(), this->height());
//    ui->label->setGeometry((0,0,event->size().width(),event->size().height()));qDebug() << event->size();
}

此处的 resizeEvent 函数我们没有⼿动调⽤,但是能在窗⼝⼤⼩变化时被⾃动调⽤.
这个过程就是依赖C++中的多态来实现的.Qt框架内部管理着QWidget对象表⽰咱们的窗
⼝.在窗⼝⼤⼩发⽣改变时,Qt就会⾃动调⽤ resizeEvent 函数.
但是由于实际上这个表⽰窗⼝的并⾮是QWidget,⽽是QWidget的⼦类,也就是咱们⾃⼰写
的Widget.此时虽然是通过⽗类调⽤函数,但是实际上执⾏的是⼦类的函数(也就是我们重写
后的 resizeEvent ).
此处属于是多态机制的⼀种经典⽤法.通过上述过程,就可以把⾃定义的代码,插⼊到框架内
部执⾏.相当于"注册回调函数".

这里会显示一个全部的图片，而且当我们拖动窗口，图片尺寸也会变化 设置文本

在ui中设置了二个label标签，并且有&

此处把label中的⽂本设置为"快捷键&A"这样的形式.其中&后⾯跟着的字符,就是快捷键.可以通过alt+A的⽅式来触发该快捷键.

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//设置label的伙伴widget buddyui->label->setBuddy(ui->radioButton);ui->label_2->setBuddy(ui->radioButton_2);
}

2、LCD Number

在Qt中，QLCDNumber 是一个用于显示数字的控件，通常用于模拟液晶数字显示器。QLCDNumber 可以显示整数或浮点数，并支持多种进制（如十进制、十六进制等）。

核⼼属性

属性	说明
intValue	QLCDNumber 显⽰的数字值(int).
value	QLCDNumber 显⽰的数字值(double). 和intValue是联动的. 例如给value设为1.5,intValue的值就是2. 另外,设置value和intValue的⽅法名字为 display ,⽽不是 setValue 或者 setIntValue .
digitCount	显⽰⼏位数字.
mode	数字显⽰形式. 1. QLCDNumber::Dec ：⼗进制模式，显⽰常规的⼗进制数字。 2. QLCDNumber::Hex ：⼗六进制模式，以⼗六进制格式显⽰数字。 3. QLCDNumber::Bin ：⼆进制模式，以⼆进制格式显⽰数字。 4. QLCDNumber::Oct ：⼋进制模式，以⼋进制格式显⽰数字。只有⼗进制的时候才能显⽰⼩数点后的内容.
segmentStyle	设置显⽰⻛格. 1. QLCDNumber::Flat ：平⾯的显⽰⻛格，数字呈现在⼀个平坦的表⾯上。 2. QLCDNumber::Outline ：轮廓显⽰⻛格，数字具有清晰的轮廓和阴影效果。 3. QLCDNumber::Filled ：填充显⽰⻛格，数字被填充颜⾊并与背景区分开。
smallDecimalPoint	设置⽐较⼩的⼩数点.

代码示例：倒计时

1)在界⾯上创建⼀个 QLCDNumber ,初始值设为10.
objectName 为 lcdNumbe

2)修改widget.h代码,创建⼀个 QTimer 成员,和⼀个 updateTime 函数

    QTimer* timer;void updateTime();

修改widget.cpp,在构造函数中初始化 QTimer

• QTimer 表⽰定时器.通过 start ⽅法启动定时器之后,就会每隔⼀定周期,触发⼀次
QTimer::timeout 信号.
• 使⽤ connect 把 QTimer::timeout 信号和 Widget::updateTime 连接起来,意味着每
次触发 QTimer::timeout 都会执⾏ Widget::updateTime

3)修改widget.cpp,在构造函数中初始化 QTimer

• QTimer 表⽰定时器.通过 start ⽅法启动定时器之后,就会每隔⼀定周期,触发⼀次
QTimer::timeout 信号.
• 使⽤ connect 把 QTimer::timeout 信号和 Widget::updateTime 连接起来,意味着每
次触发 QTimer::timeout 都会执⾏ Widget::updateTime

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建timer实例timer = new QTimer(this);//连接信号和槽，每隔一段时间触发timeout信号，把timeout信号和槽函数updateTime连接起来connect(timer,&QTimer::timeout,this,&Widget::updateTime);//启动QTimer,每隔1000mstimer->start(1000);//qt为了保证线程安全，所有对界面的操作必须在主线程中完成}

4)修改widget.cpp,实现 updateTime

• 通过 intValue 获取到 QLCDNumber 内部的数值.
• 如果value的值归0了,就停⽌ QTimer .接下来 QTimer 也就不会触发timeout信号了.

void Widget::updateTime()
{qDebug()<<"updateTime";int value = ui->lcdNumber->intValue();if(value<=0){//时间到停止计时timer->stop();return ;}ui->lcdNumber->display(value-1);
}

运行程序，时间就开始不断更新

对于上面的代码，大家可以会有二个想法：

我可以不可以直接在Widget构造函数中,通过⼀个循环+sleep的⽅式是否可以呢?

这里显然是不可以的，因为循环会导致Widget的构造函数⽆法执⾏完毕,此时界⾯是不能正确构造和显⽰的.

那可不可以在Widget构造函数中,另起⼀个线程,在新线程中完成循环+sleep是否可以呢?

这里也是不可以的 Qt中规定,任何对于GUI上内容的操作,必须在主线程中完成.像Widget构造
函数,以及connect连接的slot函数,都是在主线程中调⽤的.⽽我们⾃⼰创建的线程则不是.
当我们⾃⼰的线程中尝试对界⾯元素进⾏修改时,Qt程序往往会直接崩溃.

这样的约定主要是因为GUI中的状态往往是牵⼀发动全⾝的,修改⼀个地⽅,就需要同步的对
其他内容进⾏调整.
⽐如调整了某个元素的尺⼨,就可能影响到内部的⽂字位置,或者其他元素的位置.这⾥⼀连串
的修改,都是需要按照⼀定的顺序来完成的.
由于多线程执行的顺序⽆法保障,因此Qt从根本上禁⽌了其他线程修改GUI状态,避免后续的
⼀系列问题.

3、ProgressBar

在Qt中，QProgressBar 是一个用于显示任务进度的控件。你可以使用 QProgressBar 来向用户展示任务的完成进度，例如文件下载、数据处理等。QProgressBar 可以是确定性的（有明确的最小值和最大值）或不确定性的（显示为一个持续动画，以表明任务正在进行）。

核⼼属性

属性	说明
minimum	进度条最⼩值
maximum	进度条最⼤值
value	进度条当前值
alignment	⽂本在进度条中的对⻬⽅式. • Qt::AlignLeft :左对⻬ • Qt::AlignRight :右对⻬ • Qt::AlignCenter :居中对⻬ • Qt::AlignJustify :两端对⻬
textVisible	进度条的数字是否可⻅.
orientation	进度条的⽅向是⽔平还是垂直
invertAppearance	是否是朝反⽅向增⻓进度
textDirection	⽂本的朝向.
format	展⽰的数字格式. • %p ：表⽰进度的百分⽐（0-100） • %v ：表⽰进度的数值（0-100） • %m ：表⽰剩余时间（以毫秒为单位） • %t ：表⽰总时间（以毫秒为单位

案例：

在ui界面中创建一个显示进度条控件

修改widget.h,创建 QTimer 和 updateProgressBar 函数

    QTime* timer;void updateProgressBar();

修改widget.cpp,初始化 QTimer
• 此处设置100ms触发⼀次timeout信号.也就是⼀秒钟触发10次

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);timer = new QTimer(this);connect(timer,&QTimer::timeout,this,&Widget::updateProgressBar);timer->start(100);
}

修改widget.cpp,实现 updateProgressBar

void Widget::updateProgressBar()
{int value = ui->progressBar->value();if (value >= 100) {timer->stop();return;}ui->progressBar->setValue(value + 1);
}

4、Calendar Widget

在Qt框架中，QCalendarWidget是一个用于显示和选择日期的日历控件。它提供了一个直观的界面，允许用户通过点击日历来选择日期。

核⼼属性

属性	说明
selectDate	当前选中的⽇期
minimumDate	最⼩⽇期
maximumDate	最⼤⽇期
firstDayOfWeek	每周的第⼀天(也就是⽇历的第⼀列)是周⼏.
gridVisible	是否显⽰表格的边框
selectionMode	是否允许选择⽇期
navigationBarVisible	⽇历上⽅标题是否显⽰
horizontalHeaderFormat	⽇历上⽅标题显⽰的⽇期格式
verticalHeaderFormat	⽇历第⼀列显⽰的内容格式
dateEditEnabled	是否允许⽇期被编辑

重要信号

信号	说明
selectionChanged(const QDate&)	当选中的⽇期发⽣改变时发出
activated(constQDate&)	当双击⼀个有效的⽇期或者按下回⻋键时发出，形参是⼀个QDate类型，保存了选中的⽇期
currentPageChanged(int, int)	当年份⽉份改变时发出，形参表⽰改变后的新年份和⽉份

在界⾯上创建⼀个 QCalendarWidget 和⼀个label ： objectName 为 calendarWidget , label

给 QCalendarWidget 添加slot函数

void Widget::on_calendarWidget_selectionChanged()
{QDate date = ui->calendarWidget->selectedDate();qDebug() << date;ui->label->setText(date.toString());
}

二、输出类控件

1、QLineEdit

在Qt框架中，QLineEdit是一个用于接收单行文本输入的小部件（widget）。它提供了一个简单的文本框，用户可以在其中输入和编辑文本。QLineEdit是一个非常常用的控件，常用于表单、对话框和各种用户输入场景。

核⼼属性

属性	说明
text	输⼊框中的⽂本
inputMask	输⼊内容格式约束
maxLength	最⼤⻓度

frame	是否添加边框
echoMode	显⽰⽅式. • QLineEdit::Normal ：这是默认值，⽂本框会显⽰输⼊的⽂本。 • QLineEdit::Password ：在这种模式下，输⼊的字符会被隐藏，通常⽤星号（*）或等号（=）代替。 • QLineEdit::NoEcho ：在这种模式下，⽂本框不会显⽰任何输⼊的字符。
cursorPosition	光标所在位置
alignment	⽂字对⻬⽅式,设置⽔平和垂直⽅向的对⻬.
dragEnabled	是否允许拖拽
readOnly	是否是只读的(不允许修改)
placeHolderText	当输⼊框内容为空的时候,显⽰什么样的提⽰信息
clearButtonEnabled	是否会⾃动显⽰出"清除按钮".

代码⽰例:验证两次输⼊的密码⼀致

在界面创建二个输入框和一个lable

编写代码,设置两个输⼊框的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);
}

给两个输⼊框设置 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("两次输⼊的密码不同!");}
}

当我们输入相同密码的时候，就会提示密码相同

2、TextEdit

在Qt框架中，QTextEdit是一个多行的文本编辑控件，用于显示和编辑富文本或纯文本。与QLineEdit不同，QTextEdit可以处理多行文本，并且支持各种文本格式和样式。

核心属性

属性	说明
markdown	输⼊框内持有的内容.⽀持markdown格式.能够⾃动的对markdown⽂本进⾏渲染成html
html	输⼊框内持有的内容.可以⽀持⼤部分html标签.包括img和table等.
placeHolderText	输⼊框为空时提⽰的内容.
readOnly	是否是只读的
undoRedoEnable	是否开启undo/redo功能. 按下ctrl+z触发undo 按下ctrl+y触发redo
autoFormating	开启⾃动格式化.
tabstopWidth	按下缩进占多少空间
overwriteMode	是否开启覆盖写模式
acceptRichText	是否接收富⽂本内容

核⼼信号

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

代码⽰例:获取多⾏输⼊框的内容

创建ui控件

给多⾏输⼊框添加slot函数.处理 textChanged 信号.

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

运行输入，将输入框中的内容同步到Lable中,

3、ComboBox

在Qt框架中，QComboBox是一个用于显示下拉列表的控件。它允许用户从预定义的选项列表中进行选择。QComboBox可以显示静态列表，也可以动态添加和删除项目。

核心属性

属性	说明
currentText	当前选中的⽂本
currentIndex	当前选中的条⽬下标.从0开始计算.如果当前没有条⽬被选中,值为-1
ditable	是否允许修改设为true时, QComboBox 的⾏为就⾮常接近 QLineEdit ,也可以设置 validator
iconSize	下拉框图标(⼩三⻆)的⼤⼩

核⼼⽅法

⽅法	说明
addItem(constQString&)	添加⼀个条⽬
currentIndex()	获取当前条⽬的下标从0开始计算.如果当前没有条⽬被选中,值为-1
currentText()	获取当前条⽬的⽂本内容.

核⼼信号

⽅法	说明
activated(int) activated(constQString&text)	当⽤户选择了⼀个选项时发出.这个时候相当于⽤户点开下拉框,并且⿏标划过某个选项.此时还没有确认做出选择.
currentIndexChanged(int) currentIndexChanged(constQString &text)	当前选项改变时发出.此时⽤⼾已经明确的选择了⼀个选项. ⽤⼾操作或者通过程序操作都会触发这个信号.
editTextChanged(constQString& text)	当编辑框中的⽂本改变时发出 (editable为true时有效)

代码⽰例:⽤下拉框模拟⻨当劳点餐

在ui界面中创建三个下拉框comboBox

在widget.cpp中初始化下拉框中条目的内容，并且添加对应的slot函数

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//给下拉框添加条目ui->comboBox->addItem("汉堡1");ui->comboBox->addItem("汉堡包2");ui->comboBox_2->addItem("小吃1");ui->comboBox_2->addItem("小吃2");ui->comboBox_3->addItem("饮料1");ui->comboBox_3->addItem("饮料2");
}Widget::~Widget()
{delete ui;
}void Widget::on_pushButton_clicked()
{qDebug()<<"汉堡选择"<<ui->comboBox->currentText();qDebug()<<"小吃选择"<<ui->comboBox_2->currentText();qDebug()<<"饮料选择"<<ui->comboBox_3->currentText();
}