常用控件QLabel

QLabel可以用来显示文本和图片。

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 就会被选中。

关于testFormat

纯文本：最普通的文本

富文本：内容更丰富的文本，支持html（例如word工具，编辑的文件就可以认为是一种富文本）

markdown：是一个非常常用的书写文档的格式，提供了各种特殊符号，表示不同的样式/格式。

例子：显示不同格式的文本

<b>这是一段富文本</b>

使用<b>标签，表示文本加粗。

 如果将< b>标签加到纯文本中，只是被当成了单纯的文本，没有进行任何的渲染操作。

纯文本中，#只是被当成了文本"#"

在mark down中，# 是一级标题 

代码展示：

#include "widget.h"
#include "ui_widget.h"

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

    //把第二个label文本设置成显示富文本
    ui->label_2->setTextFormat(Qt::RichText);
    ui->label_2->setText("<b>这是一段富文本</b>");

    //把第三个label文本设置成显示 markdown
    ui->label_3->setTextFormat(Qt::MarkdownText);
    ui->label_3->setText("# 这是一段 markdown 文本");

}

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

例子：显示图片

在代码中直接写固定数据，这样的做法称为“硬编码”。

窗口的尺寸为 800 * 600

QLabel的尺寸为 800 * 600

而图片的尺寸不一定是800*600

代码实现：

#include "widget.h"
#include "ui_widget.h"

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

    //将QLabel设置成与窗口大小一致
    QRect windowrRect = this->geometry();
    //ui->label->setGeometry(0, 0, 800, 600);
    ui->label->setGeometry(0, 0, windowrRect.width(), windowrRect.height());
    //将图片导入到标签
    QPixmap pixmap(":/Qt.png");
    ui->label->setPixmap(pixmap);
    //自动拉伸属性
    ui->label->setScaledContents(true);
}

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

在刚才的代码中QLabel的尺寸设置是在构造函数里面，这种设置相当于是一次性的，一旦程序运行起来之后，QLabel的尺寸就固定下来了，窗口发生改变，此时，QLabel是不会变化的。

需要QLabel随着窗口的变化实时发生改变。

Qt中，表示用户的操作，有俩类操作，一类是信号，，一类是事件。

当用户拖拽修改窗口大小的时候，就会触发resize事件（resizeEvent）

像resize这样的事件，是连续变化的，把窗口尺寸从A拖到B这个过程中，会触发一系列的resizeEvent。

此时就可以借助resizeEvent来完成上述的功能。

即可以让Widget窗口类重写父类（QWidget的resizeEvent虚函数）

在鼠标拖动窗口的过程中这个虚函数就会被反复调用执行，每次触发一个resizeEvent事件都会调用一次对应的虚函数。

由于此处进行了函数重写，调用父类的虚函数就会实际调用到子类的对应的函数（多态）

此处的形参event是非常有用的，这里包含了触发resize事件这一时刻窗口的尺寸的数值

在实际编程中，指定回调函数其实存在多种方式：

（1）设置函数指针

（2）设置仿函数（函数对象）

（3）设置lambda

（4）通过重写父类虚函数（框架中拿着父类的指针调用这个函数，如果创建了子类重写了这个函数，在多态机制下，实际执行的就是子类的函数）

（5）Qt的信号槽

#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设置成与窗口大小一致
    QRect windowrRect = this->geometry();
    //ui->label->setGeometry(0, 0, 800, 600);
    ui->label->setGeometry(0, 0, windowrRect.width(), windowrRect.height());
    //将图片导入到标签
    QPixmap pixmap(":/Qt.png");
    ui->label->setPixmap(pixmap);
    //自动拉伸属性
    ui->label->setScaledContents(true);
}

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


void Widget::resizeEvent(QResizeEvent *event)
{
    qDebug() << event->size();
    ui->label->setGeometry(0, 0, event->size().width(), event->size().height());
}

例子：文本对齐、自动换行、缩进、边距

 在Qt Designer中设置四个label

 QFrame是QLabel的父类，其中frameShape属性用来设置边框性质

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

编写widget.cpp，给四个label设置4个属性

| 在C++中是按位或

 

此处设置的缩进即使文本进行换行，后续的行也会产生缩进，不仅仅是首行缩进。

在前端中，CSS也能设置缩进，text-indent属性，首行缩进。

代码实现：

#include "widget.h"
#include "ui_widget.h"

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

    //设置对齐方式
    ui->label->setText("这是一段文本");
    ui->label->setAlignment(Qt::AlignVCenter | Qt::AlignHCenter);

    //设置自动换行
    ui->label_2->setText("这是一段很长很长很长很长很长很长很长很长很长很长很长很长"
                         "很长很长很长很长很长很长很长很长很长很长很长很长很长很长"
                         "很长很长很长很长很长很长很长很长很长很长很长很长很长很长"
                         "的文本");
    ui->label_2->setWordWrap(true);

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

    //设置边距
    ui->label_4->setText("这是一段很长很长很长很长很长很长很长很长很长很长很长很长"
                         "很长很长很长很长很长很长很长很长很长很长很长很长很长很长"
                         "很长很长很长很长很长很长很长很长很长很长很长很长很长很长"
                         "的文本");
    ui->label_4->setWordWrap(true);
    ui->label_4->setMargin(60);
}

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

运⾏程序, 可以看到如下效果

• 第⼀个 label 垂直⽔平居中
• 第⼆个 label 设置了 wordWrap, 能够⾃动换⾏
• 第三个 label 设置了 Indent, 左侧和上⽅和边框有间距. 右侧则没有.
• 第四个 label 设置了 margin, 四个⽅向均有间距(图上仅体现出三个⽅向, 下⽅看不出来)

例子：设置伙伴

 

 运⾏程序, 可以看到, 按下快捷键 alt + a 或者 alt + b, 即可选中对应的选项

在Qt中，QLabel中写的文本，是可以指定“快捷键”，此处的快捷键的规则功能要比QPushButton弱很多，是在文本中使用& 跟上一个字符来表示快捷键。

比如：&A => 通过键盘上的alt + a来触发这个快捷键。

           &B => 通过键盘上的alt + b来触发这个快捷键。

绑定伙伴关系之后，通过快捷键就可以选中对应的单选按钮/复选按钮