当前位置：首页 > news >正文

9.QT-显示类控件|Label|显示不同格式的文本|显示图片|文本对齐|自动换行|缩进|边距|设置伙伴(C++)

news 来源：原创 2025/8/2 10:59:29

Label

QLabel 可以⽤来显⽰⽂本和图⽚

属性	说明
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就会被选中

代码⽰例:显⽰不同格式的⽂本

1)在界⾯上创建三个 QLabel
尺⼨放⼤⼀些.objectName分别为label,label_2,label_3
![[Pasted image 20250420101138.png]]

2)修改widget.cpp,设置三个label的属性

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//把第一个label设置成显示纯文本ui->label->setTextFormat(Qt::PlainText);ui->label->setText("<b>这是一段纯文本</b>");ui->label_2->setTextFormat(Qt::RichText);ui->label_2->setText("<b>这是一段富文本</b>");ui->label_3->setTextFormat(Qt::MarkdownText);ui->label_3->setText("# 这是一段markdown文本");
}

![[Pasted image 20250420103816.png]]

代码⽰例:显⽰图⽚

虽然 QPushButton 也可以通过设置图标的⽅式设置图⽚,但是并⾮是⼀个好的选择.更多的时候还是希望通过 QLabel 来作为⼀个更单纯的显⽰图⽚的⽅式
1)在界⾯上创建⼀个QLabel, objectName 为 label
![[Pasted image 20250420105618.png]]

2)创建 resource.qrc ⽂件,并把图⽚导⼊到qrc中
![[Pasted image 20250420105554.png]]

3)修改widget.cpp,给QLabel设置图⽚
QWidget大小800x600
![[Pasted image 20250420105805.png]]

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//先把QLabel设置成和窗口一样大，并且把这个QLabel左上角设置到窗口左上角这里QRect windowRect = this->geometry();ui->label->setGeometry(0,0,windowRect.width(),windowRect.height());QPixmap pixmap(":/miku.jpg");ui->label->setPixmap(pixmap);
}

![[Pasted image 20250420110242.png]]

miku.jpg的尺寸是1222x903

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//先把QLabel设置成和窗口一样大，并且把这个QLabel左上角设置到窗口左上角这里QRect windowRect = this->geometry();ui->label->setGeometry(0,0,windowRect.width(),windowRect.height());QPixmap pixmap(":/miku.jpg");ui->label->setPixmap(pixmap);//启动自动拉伸，图片就能填充满整个窗口ui->label->setScaledContents(true);
}

![[Pasted image 20250420110453.png]]

但是一拖动，图片没有跟着适应窗口
![[Pasted image 20250420110536.png]]

之前的尺寸设置是一次性的，程序运行起来以后，QLabel的尺寸就固定下来了，窗口发生改变，QLabel不会改变
为了解决这个问题,可以在Widget中重写resizeEvent函数.

Qt中，表示用户的操作，有两类概念一个是信号，另一个是事件~~
当用户拖拽修改窗口大小的时候，就会触发resize事件（resizeEvent)
像resize这样的事件，是连续变化的.把窗口尺寸从A拖到B这个过程中，会触发出一系列的resizeEvent 此时就可以借助resizeEvent来完成上述的功能
可以让Widget窗口类，重写父类(QWidget)的resizeEvent虚函数

在鼠标拖动窗口尺寸的过程中这个函数就会被反复调用执行
每次触发一个resizeEvent事件都会调用一次对应的虚函数
由于此处进行了函数重写，调用父类的虚函数就会实际调用到子类的对应的函数(多态)
widget.h

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();void resizeEvent(QResizeEvent *event);
private:Ui::Widget *ui;
};
#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
#include <QResizeEvent>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//先把QLabel设置成和窗口一样大，并且把这个QLabel左上角设置到窗口左上角这里QRect windowRect = this->geometry();ui->label->setGeometry(0,0,windowRect.width(),windowRect.height());QPixmap pixmap(":/miku.jpg");ui->label->setPixmap(pixmap);//启动自动拉伸，图片就能填充满整个窗口ui->label->setScaledContents(true);
}Widget::~Widget()
{delete ui;
}// 重写 resizeEvent. 这个函数会在窗⼝⼤⼩发⽣改变时被⾃动调⽤.
//此处的形参event是非常有用的，这里就包含了触发这个resize事件这一时刻，窗口的尺寸的数值
void Widget::resizeEvent(QResizeEvent *event)
{qDebug() << event->size();
}

![[Pasted image 20250420123738.png]]

执⾏程序,此时改变窗⼝⼤⼩,图⽚也会随之变化.
于此同时,在控制台⾥也能够看到尺⼨变化的过程

void Widget::resizeEvent(QResizeEvent *event)
{qDebug() << event->size();// 可以直接通过 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());
}

![[Pasted image 20250420124345.png]]

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

在实际编程中，指定回调函数其实有很多种写法：

设置函数指针
设置仿函数(函数对象)
设置lambda
通过重写父类虚函数（框架中拿看父类的指针调用这个函数.如果你创建了子类重写了这个函数此时在多态机制下，实际执行的就是子类的函数了)
Qt的信号槽

代码⽰例:⽂本对⻬,⾃动换⾏,缩进,边距

1)创建四个label, objectName 分别是 label 到 label_4
并且在 QFrame 中设置 frameShape 为 Box (设置边框之后看起来会更清晰⼀些)
![[Pasted image 20250420124851.png]]

QFrame 是 QLabel 的⽗类.其中 frameShape 属性⽤来设置边框性质.

QFrame::Box ：矩形边框
QFrame::Panel ：带有可点击区域的⾯板边框
QFrame::WinPanel ：Windows⻛格的边框
QFrame::HLine ：⽔平线边框
QFrame::VLine ：垂直线边框
QFrame::StyledPanel ：带有可点击区域的⾯板边框，但样式取决于窗⼝主题

2)编写widget.cpp,给这四个label设置属性.

    ui->label->setText("这是一段文本");ui->label->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);

![[Pasted image 20250420125615.png]]

    ui->label->setText("这是一段文本");ui->label->setAlignment(Qt::AlignRight | Qt::AlignTop);

![[Pasted image 20250420125710.png]]

自动换行
![[Pasted image 20250420130002.png]]

	ui->label_2->setText("这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本");ui->label_2->setWordWrap(true);

![[Pasted image 20250420130102.png]]

    //设置缩进ui->label_3->setText("这是一段文本");ui->label_3->setIndent(50);

![[Pasted image 20250420130256.png]]

    //设置缩进ui->label_3->setText("这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本");ui->label_3->setIndent(50);ui->label_3->setWordWrap(true);

![[Pasted image 20250420130408.png]]

    //设置边距ui->label_4->setText("这是一段文本");ui->label_4->setMargin(50);

![[Pasted image 20250420130740.png]]

    //设置边距ui->label_4->setText("这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本");ui->label_4->setMargin(50);

![[Pasted image 20250420131008.png]]

代码⽰例:设置伙伴

1)创建两个label和两个radioButton.
objectName 分别问 label , label_2 , radioButton , radioButton_2
![[Pasted image 20250420131410.png]]

此处把label中的⽂本设置为"快捷键 &A"这样的形式.
其中&后⾯跟着的字符,就是快捷键.可以通过alt+A的⽅式来触发该快捷键.
但是注意,这⾥的快捷键和 QPushButton 的不同.需要搭配alt和单个字⺟的⽅式才能触发.

2)编写widget.cpp,设置buddy属性
当然这⾥也可以使⽤Qt Designer直接设置

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

3)运⾏程序,可以看到,按下快捷键alt+a或者alt+b,即可选中对应的选项.
![[Pasted image 20250420131747.png]]

Label

代码⽰例:显⽰不同格式的⽂本

代码⽰例:显⽰图⽚

代码⽰例:⽂本对⻬,⾃动换⾏,缩进,边距

代码⽰例:设置伙伴

相关文章：