从0到1学习Qt -- 常见控件之显示类控件

1. Label

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

1.1. Label核⼼属性

|-------------------|-----------------------------------------------------------------------------------------------------------------|
| 属性 | 说明 |
| 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.2. 代码示例一

1. 在界⾯上创建三个 QLabel
   尺⼨放⼤⼀些. objectName 分别为 label, label_2, label_3
   
2. 修改 widget.cpp, 设置三个 label 的属性

#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->setTextFormat(Qt::PlainText);

    ui->label_2->setText("<b>这是一段富文本</b>");
    ui->label_2->setTextFormat(Qt::RichText);

    ui->label_3->setText("## 这是一段Markdown文本");
    ui->label_3->setTextFormat(Qt::MarkdownText);

}

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

3)运行结果

1.3. 代码示例二

代码⽰例: 显⽰图⽚

1. 在界⾯上创建⼀个 QLabel, objectName 为 label
   
2. 创建 resource.qrc ⽂件, 并把图⽚导⼊到 qrc 中.
   
3. 修改 widget.cpp, 给 QLabel 设置图⽚

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

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QPixmap pixmap(":/bicycle.png");
    ui->label->setPixmap(pixmap);
}

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

4)运行结果

1.4. 代码示例三

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

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

QFrame 是 QLabel 的⽗类. 其中 frameShape 属性⽤来设置边框性质.
QFrame::Box ：矩形边框
QFrame::Panel ：带有可点击区域的⾯板边框
QFrame::WinPanel ：Windows⻛格的边框
QFrame::HLine ：⽔平线边框
QFrame::VLine ：垂直线边框
QFrame::StyledPanel ：带有可点击区域的⾯板边框，但样式取决于窗⼝主题

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

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

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

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

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

    ui->label_3->setIndent(20);
    ui->label_3->setText("这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本");

    ui->label_4->setMargin(10);
    ui->label_4->setText("这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本");
}

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

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

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

1.5. 代码示例四

1. 创建两个 label 和 两个 radioButton.
   objectName 分别问 label , label_2 , radioButton , radioButton_2

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

2) 编写 widget.cpp, 设置 buddy 属性

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

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    ui->label->setBuddy(ui->radioButton);
    ui->label_2->setBuddy(ui->radioButton_2);
}

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

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

2. LCD Number

QLCDNumer 是⼀个专⻔⽤来显⽰数字的控件. 类似于 "⽼式计算器" 的效果.

2.1. LCDNumber核心属性

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

2.2. 代码示例

1. 在界⾯上创建⼀个 QLCDNumber , 初始值设为 10. objectName 为 lcdNumber
   
2. 修改 widget.h 代码, 创建⼀个 QTimer 成员, 和⼀个 handle 函数，并在widget.cpp实现

widget.h:

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

public slots:
    void handle();

private:
    Ui::Widget *ui;
    QTimer *timer;
};
#endif // WIDGET_H





widget.cpp:

#include "widget.h"
#include "ui_widget.h"
#include <QTimer>
#include <QDebug>

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

    timer = new QTimer(this);

    connect(timer, &QTimer::timeout, this, &Widget::handle);

    timer->start(1000);
}

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

void Widget::handle()
{
    qDebug() << "handle执行";

    int value = ui->lcdNumber->intValue();
    if(value <= 0)
    {
        timer->stop();
        return ;
    }

    ui->lcdNumber->display(value - 1);
}

3)演示效果

3. ProgressBar

使⽤ QProgressBar 表⽰⼀个进度条.

3.1. ProgressBar核心属性

|------------------|-------------------------------------------------------------------------------------------------------|
| 属性 | 说明 |
| 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 ：表⽰总时间（以毫秒为单位） |

3.2. 代码示例

代码⽰例: 设置进度条按时间增⻓

1. 在界⾯上创建进度条, objectName 为 progressBar，其中最⼩值设为 0, 最⼤值设为 100. 当前值设为 0
   
2. 修改 widget.h, 创建 QTimer 和 updateProgressBar 函数. 修改 widget.cpp, 初始化 QTimer，此处设置 100ms 触发⼀次 timeout 信号. 也就是⼀秒钟触发 10 次.

widget.h:

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QTimer>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

public slots:
    void updataProgressBar();

private:
    Ui::Widget *ui;
    QTimer *timer;
};
#endif // WIDGET_H




widget.cpp:

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

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

    timer = new QTimer(this);
    connect(timer, &QTimer::timeout, this, &Widget::updataProgressBar);

    timer->start(100);
}

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

void Widget::updataProgressBar()
{
    int value = ui->progressBar->value();

    if(value >= 100)
    {
        timer->stop();
        return;
    }

    ui->progressBar->setValue(value+1);
}

3)运行效果

4. CalendarWidget

QCalendarWidget 表⽰⼀个 "⽇历"

4.1. CalendarWidget核心属性

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

4.2. CalendarWidget核心信号

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

4.3. 代码示例

代码⽰例: 获取选中的⽇期

1. 在界⾯上创建⼀个 QCalendarWidget 和 ⼀个 label ，objectName 为 calendarWidget , label
   
2. 给 QCalendarWidget 添加 slot 函数

#include "widget.h"
#include "ui_widget.h"
#include <QDate>
#include <QLabel>

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

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


void Widget::on_calendarWidget_selectionChanged()
{
    QDate date = ui->calendarWidget->selectedDate();

    ui->label->setText(date.toString());
}

3. 执⾏程序, 可以看到当选择不同的⽇期时, label 中的内容就会随之改变.