Qt控件----显示窗口部件

显示窗口部件

Qt Designer 显示窗口部件提供的面板中，提供了 10 种显示小部件。在 Qt5.5 以前的 Qt5 版本这个显示窗口部件还有一个 QWebview 部件，在 Qt5.6 开始就被移除了，取而代之的是QWebengine，但是 QWebengine 不是以小部件的形式在这个显示窗口部件里显示。

（1） Label:标签
（2） Text Browser:文本浏览器
（3） Graphics View:图形视图
（4） Calendar Widget:日历
（5） LCD Number:液晶数字
（6） Progress Bar:进度条
（7） Horizontal Line:水平线
（8） Vertial Line:垂直线
（9） OpenGL Widget:开放式图形库工具
（10） QQuick Widget:嵌入式 QML 工具

这十种显示部件作用简介如下:

QLabel提供了一种用于文本或图像显示的小部件，在前4.1与4.2某些小节已经出现过Label控件，只用了它显示文本，其实它还可以用于显示图像。
QCalendarWidget 继承 QWidget。QCalendarWidget 类提供了一个基于月的日历小部件，允许用户选择日期。CalendarWidget 小部件是用当前月份和年份初始化的，QCalendarWidget 还提供了几个公共插槽来更改显示的年份和月份。
QLCDNumber 继承 QFrame。QLCDNumber 小部件显示一个类似于 lcd 的数字。QLCDNumber 小部件可以显示任意大小的数字。它可以显示十进制、十六进制、八进制或二进制数字。使用 display()插槽很容易连接到数据源，该插槽被重载以接受五种参数类型中的任何一种。
QProgressBar 继承 QWidget。QProgressBar 小部件提供了一个水平或垂直的进度条。进度条用于向用户显示操作的进度，并向他们确认应用程序仍在运行。
QFrame 继承 QWidget。QFrame 类是有框架的窗口部件的基类，它绘制框架并且调用一个虚函数 drawContents()来填充这个框架。这个函数是被子类重新实现的。这里至少还有两个有用的函数：drawFrame()和 frameChanged()。
QTextBrowser 继承 QTextEdit，QTextBrowser 类提供了一个具有超文本导航的文本浏览器。该类扩展了 QTextEdit(在只读模式下)，添加了一些导航功能，以便用户可以跟踪超文本文档中的链接。
QGraphicsView 继承 QAbstractScrollArea。QGraphicsView 是图形视图框架的一部分，它提供了基于图元的模型/视图编程。QGraphicsView在可滚动视图中可视化QGraphicsScene的内容。
要创建带有几何项的场景，请参阅 QGraphicsScene 的文档。
要可视化场景，首先构造一个 QGraphicsView 对象，将要可视化的场景的地址传递给 QGraphicsView 的构造函数。或者，可以调用 setScene()在稍后设置场景。
Text Browser （文本浏览器）、Graphics View(图形视图)、OpenGL Widget(开放式图形库工具)、QQuick Widget(嵌入式 QML 工具)将不在本小节介绍，其中 Text Browser （文本浏览器）、GraphicsView(图形视图)在 下面显示窗口之浏览器介绍。

一、QLabel

1. 控件简介

QLabel 提供了一种用于文本或图像显示的小部件，在前已经出现过Label 控件，只用了它显示文本，其实它还可以用于显示图像

2. 用法示例

例 22_qlbel 标签显示图像或文本（难度简单），前面已经在某些小节出现过 label 了，但只是用来显示文本内容，实际上像 button（按钮），widget，label 等都是可以用来显示图像的。只是 button 不常用来显示单张图像，因为 button 是有三种状态，分别是按下，释放，悬停。所以它不常用于单单显示一张图像。

在新建例程中不要勾选“Generate form”，默认继承 QMainWindow 类即可。项目新建完成如下图。

本例已经添加一张资源图片。添加完成如下图。

在头文件“mainwindow.h”具体代码如下。

1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QLabel>
6
7 class MainWindow : public QMainWindow
8 {
9 Q_OBJECT
10
11 public:
12 MainWindow(QWidget *parent = nullptr);
13 ~MainWindow();
14
15 private:
16 /* 用一个 QLabel 对象用于显示字符串 */
17 QLabel *labelString;
18
19 /* 用一个 QLabel 对象用于显示图像 */
20 QLabel *labelImage;
21 };
22 #endif // MAINWINDOW_H

在源文件“mainwindow.cpp”具体代码如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 设置大小与位置 */
7 this->setGeometry(0, 0, 800, 480);
8
9 /* 使用资源里的文件时格式是 :+前缀+文件路径 */
10 QPixmap pixmap(":images/openedv.png");
11
12 labelImage = new QLabel(this);
13
14 /* 标签大小为 452×132,根据图像的大小来设置 */
15 labelImage->setGeometry(180, 150, 452, 132);
16 /* 设置图像 */
17 labelImage->setPixmap(pixmap);
18 /* 开启允许缩放填充 */
19 labelImage->setScaledContents(true);
20
21 labelString = new QLabel(this);
22 labelString->setText("标签演示文本");
23 labelString->setGeometry(300, 300, 100, 20);
24 }
25
26 MainWindow::~MainWindow()
27 {
28 }

在源文件“main.cpp”具体代码由新建项目时生成，无改动。

3. 运行效果

程序编译运行的结果如下。为了避免引起图像被压缩或者拉伸，本次设置标签的大小为452*132，这是根据图像的实际大小来设置的。

二、QCalendarWidget

1. 控件简介

QCalendarWidget 继承 QWidget。QCalendarWidget 类提供了一个基于月的日历小部件，允许用户选择日期。CalendarWidget 小部件是用当前月份和年份初始化的，QCalendarWidget 还提供了几个公共插槽来更改显示的年份和月份。

2. 用法示例

例 23_qcalendarwidget 日历简单的使用（难度：简单），本例只是简单的使用日历控件来达到一定的效果。使用一个 CalendarWidget 控件，一个 Label 来显示当前日历所选择的日期，一个 pushButton 按钮，点击 pushButton 按钮来回到当前系统的日期。

在新建例程中不要勾选“Generate form”，默认继承 QMainWindow 类即可。项目新建完成如下图。

在头文件“mainwindow.h”具体代码如下。

1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QCalendarWidget>
6 #include <QPushButton>
7 #include <QLabel>
8
9 class MainWindow : public QMainWindow
10 {
11 Q_OBJECT
12
13 public:
14 MainWindow(QWidget *parent = nullptr);
15 ~MainWindow();
16
17 private:
18 /* 声明 QCalendarWidget，QPushButton，QLabel 对象 */
19 QCalendarWidget *calendarWidget;
20 QPushButton *pushButton;
21 QLabel *label;
22
23 private slots:
24 /* 槽函数 */
25 void calendarWidgetSelectionChanged();
26 void pushButtonClicked();
27
28 };
29 #endif // MAINWINDOW_H

在源文件“mainwindow.cpp”具体代码如下

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 设置位置与大小，下同 */
7 this->setGeometry(0, 0, 800, 480);
8
9 /* 对象实例化设置显示的位置与大小 */
10 calendarWidget = new QCalendarWidget(this);
11 calendarWidget->setGeometry(200, 20, 400, 300);
12
13 QFont font;
14 /* 设置日历里字体的大小为 10 像素 */
15 font.setPixelSize(10);
16 calendarWidget->setFont(font);
17
18 /* 对象实例化设置显示的位置与大小 */
19 pushButton = new QPushButton("回到当前日期",this);
20 pushButton->setGeometry(200, 350, 100, 30);
21
22 /* 对象实例化设置显示的位置与大小 */
23 label = new QLabel(this);
24 label->setGeometry(400, 350, 400, 30);
25 QString str = "当前选择的日期:"
26 + calendarWidget->selectedDate().toString();
27 label->setText(str);
28
29 /* 信号槽连接 */
30 connect(calendarWidget, SIGNAL(selectionChanged()),
31 this, SLOT(calendarWidgetSelectionChanged()));
32 connect(pushButton, SIGNAL(clicked()),
33 this, SLOT(pushButtonClicked()));
34 }
35
36 MainWindow::~MainWindow()
37 {
38 }
39
40 void MainWindow::calendarWidgetSelectionChanged()
41 {
42 /* 当日历点击改变当前选择的期时，更新 Label 的显示内容 */
43 QString str = "当前选择的日期:"
44 + calendarWidget->selectedDate().toString();
45 label->setText(str);
46 }
47
48 void MainWindow::pushButtonClicked()
49 {
50 /* 设置当前选定的日期为系统的 QDate */
51 calendarWidget->setSelectedDate(QDate::currentDate());
52 }
53

在源文件“main.cpp”具体代码由新建项目时生成，无改动。

3. 运行效果

程序编译运行的结果如下。当程序运行后，可以通过点击鼠标或键盘来改变当前选定的日期，label 标签则会改变为当前选定的日期，当点击回到当前日期按钮后，日历会改变当前选定的日期并且把当前选定的日期改变为系统当前的日期。拓展：可以用日历来设置生日，日期提醒等，还可以做成一个华丽的系统日历界面等。

三、QLCDNumber

1. 控件简介

QLCDNumber 继承 QFrame。QLCDNumber 小部件显示一个类似于 lcd 的数字。QLCDNumber 小部件可以显示任意大小的数字。它可以显示十进制、十六进制、八进制或二进制数字。使用 display()插槽很容易连接到数据源，该插槽被重载以接受五种参数类型中的任何一种。

2. 用法示例

例 24_qlcdnumber， LCDNumber 时钟（难度：简单），使用一个 LCDNumber 控件作时钟的显示，一个定时器定时更新 LCDNumber 的时间。

在新建例程中不要勾选“Generate form”，默认继承 QMainWindow 类即可。项目新建完成如下图。

在头文件“mainwindow.h”具体代码如下。

1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QMainWindow>
6 #include <QLCDNumber>
7 #include <QTimer>
8 #include <QTime>
9
10 class MainWindow : public QMainWindow
11 {
12 Q_OBJECT
13
14 public:
15 MainWindow(QWidget *parent = nullptr);
16 ~MainWindow();
17
18 private:
19 /* 声明 QLCDNumber 对象 */
20 QLCDNumber *lcdNumber;
21
22 /* 声明 QTimer 对象 */
23 QTimer *timer;
24
25 private slots:
26 /* 槽函数 */
27 void timerTimeOut();
28
29 };
30 #endif // MAINWINDOW_H

在源文件“mainwindow.cpp”具体代码如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 设置主窗体的大小与位置 */
7 this->setGeometry(0, 0, 800, 480);
8
9 /* 实例化与设置显示的位置大小*/
10 lcdNumber = new QLCDNumber(this);
11 lcdNumber->setGeometry(300, 200, 200, 50);
12
13 /* 设置显示的位数 8 位 */
14 lcdNumber->setDigitCount(8);
15 /* 设置样式 */
16 lcdNumber->setSegmentStyle(QLCDNumber::Flat);
17
18 /* 设置 lcd 显示为当前系统时间 */
19 QTime time = QTime::currentTime();
20
21 /* 设置显示的样式 */
22 lcdNumber->display(time.toString("hh:mm:ss"));
23
24 timer = new QTimer(this);
25 /* 设置定时器 1000 毫秒发送一个 timeout()信号 */
26 timer->start(1000);
27
28 /* 信号槽连接 */
29 connect(timer, SIGNAL(timeout()), this,
30 SLOT(timerTimeOut()));
31
32 }
33
34 MainWindow::~MainWindow()
35 {
36 }
37
38 void MainWindow::timerTimeOut()
39 {
40 /* 当定时器计时 1000 毫秒后，刷新 lcd 显示当前系统时间 */
41 QTime time = QTime::currentTime();
42 /* 设置显示的样式 */
43 lcdNumber->display(time.toString("hh:mm:ss"));
44 }

在源文件“main.cpp”具体代码由新建项目时生成，无改动。

3. 运行效果

程序编译运行的结果如下。程序运行后，可以看到时间为当前系统的时间， LCDNumber时钟显示系统时钟的时钟并运行着。

四、QProgressbar

1. 控件简介

QProgressBar 继承 QWidget。QProgressBar 小部件提供了一个水平或垂直的进度条。进度条用于向用户显示操作的进度，并向他们确认应用程序仍在运行。

2. 用法示例

例 25_qprogressbar，手机电池充电。用一个 QProgressBar 模拟手机电池充电。

在新建例程中不要勾选“Generate form”，默认继承 QMainWindow 类即可。项目新建完成如下图。

本例已经添加一张电池的背景图资源图片。添加完成如下图。

在头文件“mainwindow.h”具体代码如下。

1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QProgressBar>
6 #include <QTimer>
7
8 class MainWindow : public QMainWindow
9 {
10 Q_OBJECT
11
12 public:
13 MainWindow(QWidget *parent = nullptr);
14 ~MainWindow();
15
16 private:
17 /* 声明对象 */
18 QProgressBar *progressBar;
19 QTimer *timer;
20
21 /* 用于设置当前 QProgressBar 的值 */
22 int value;
23
24 private slots:
25 /* 槽函数 */
26 void timerTimeOut();
27
28 };
29 #endif // MAINWINDOW_H

在源文件“mainwindow.cpp”具体代码如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 设置主窗体位置与大小 */
7 this->setGeometry(0, 0, 800, 480);
8
9 progressBar = new QProgressBar(this);
10 progressBar->setGeometry(300, 200, 200, 60);
11
12 /*样式表设置，常用使用 setStyleSheet 来设置样式（实现界面美化的功能），
13 * 具体可参考 styleSheet */
14 progressBar->setStyleSheet (
15 "QProgressBar{border:8px solid #FFFFFF;"
16 "height:30;"
17 "border-image:url(:/images/battery.png);" //背景图片
18 "text-align:center;" // 文字居中
19 "color:rgb(255,0,255);"
20 "font:20px;" // 字体大小为 20px
21 "border-radius:10px;}"
22 "QProgressBar::chunk{"
23 "border-radius:5px;" // 斑马线圆角
24 "border:1px solid black;" // 黑边，默认无边
25 "background-color:skyblue;"
26 "width:10px;margin:1px;}" // 宽度和间距
27 );
28
29 /* 设置 progressBar 的范围值 */
30 progressBar->setRange(0, 100);
31 /* 初始化 value 为 0 */
32 value = 0;
33 /* 给 progressBar 设置当前值 */
34 progressBar->setValue(value);
35 /* 设置当前文本字符串的显示格式 */
36 progressBar->setFormat("充电中%p%");
37
38 /* 定时器实例化设置每 100ms 发送一个 timeout 信号 */
39 timer = new QTimer(this);
40 timer->start(100);
41
42 /* 信号槽连接 */
43 connect(timer, SIGNAL(timeout()),
44 this, SLOT(timerTimeOut()));
45 }
46
47 MainWindow::~MainWindow()
48 {
49 }
50
51 void MainWindow::timerTimeOut()
52 {
53 /* 定显示器时间到，value 值自加一 */
54 value ++;
55 progressBar->setValue(value);
56 /* 若 value 值大于 100，令 value 再回到 0 */
57 if(value>100)
58 value = 0;
59 }

在源文件“main.cpp”具体代码新建项目时生成，无改动。

3. 运行效果

程序编译运行的结果如下。程序运行后，可以看到在定时器的作用下，电池一直在充电，充到 100%，又重新回到 0%重新充电。QProgressBar 一般用于表示进度，常用于如复制进度，打开、加载进度等。

五、QFrame

1. 控件简介

QFrame 继承 QWidget。QFrame 类是有框架的窗口部件的基类，它绘制框架并且调用一个虚函数 drawContents()来填充这个框架。这个函数是被子类重新实现的。这里至少还有两个有用的函数：

drawFrame()和 frameChanged()。

QPopupMenu 使用这个来把菜单“升高”，高于周围屏幕QProgressBar 有“凹陷”的外观。QLabel 有平坦的外观。这些有框架的窗口部件可以被改变。

QFrame::Shape 这个枚举类型定义了 QFrame 的框架所使用的外形。当前定义的效果有：

 NoFrame - QFrame 不画任何东西
 Box - QFrame 在它的内容周围画一个框
 Panel - QFrame 画一个平板使内容看起来凸起或者凹陷
 WinPanel - 像 Panel，但 QFrame 绘制三维效果的方式和 Microsoft Windows 95（及其它）的一样
 ToolBarPanel - QFrame 调用 QStyle::drawToolBarPanel()
 MenuBarPanel - QFrame 调用 QStyle::drawMenuBarPanel()
 HLine - QFrame 绘制一个水平线，但没有框任何东西（作为分隔是有用的）
 VLine - QFrame 绘制一个竖直线，但没有框任何东西（作为分隔是有用的）
 StyledPanel - QFrame 调用 QStyle::drawPanel()
 PopupPanel - QFrame 调用 QStyle::drawPopupPanel()
阴影风格有：
 Plain 使用调色板的前景颜色绘制（没有任何三维效果）。
 Raised 使用当前颜色组的亮和暗颜色绘制三维的凸起线。
 Sunken 使用当前颜色组的亮和暗颜色绘制三维的凹陷线。

2. 用法示例

例 26_qframe，水平/垂直线（难度：简单），定义两个 QFrame 对象，实例化后设置成一条水平样式，一条垂直样式。实际上 Display Widgets 里的 Horizontal Line/Vertical Line 是 QFrame已经封装好的控件，也可以通过下面的例子来实现不同的效果。

在新建例程中不要勾选“Generate form”，默认继承 QMainWindow 类即可。项目新建完成如下图。

在头文件“mainwindow.h”具体代码如下

1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QFrame>
6
7 class MainWindow : public QMainWindow
8 {
9 Q_OBJECT
10
11 public:
12 MainWindow(QWidget *parent = nullptr);
13 ~MainWindow();
14
15 private:
16 /* 声明对象 */
17 QFrame *hline;
18 QFrame *vline;
19
20 };
21 #endif // MAINWINDOW_H

在源文件“mainwindow.cpp”具体代码如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 设置主窗体的显示位置与大小 */
7 this->setGeometry(0, 0, 800, 480);
8
9 /* 实例化 */
10 hline = new QFrame(this);
11 /* 确定起始点，设置长和宽，绘制距形 */
12 hline->setGeometry(QRect(200, 100, 400, 40));
13
14 /* 设置框架样式为 Hline，水平，可设置为其他样式例如 Box，
15 * 由于是样式选择 HLine，所以只显示一条水平直线
16 */
17 hline->setFrameShape(QFrame::HLine);
18 /* 绘制阴影 */
19 hline->setFrameShadow(QFrame::Sunken);
20
21 /* 实例化 */
22 vline = new QFrame(this);
23 /* 确定起始点，设置长和宽，绘制距形 */
24 vline->setGeometry(QRect(300, 100, 2, 200));
25
26 /* 设置框架样式为 Vline，垂直，可设置为其他样式例如 Box，
27 * 由于是样式选择 Vline，所以只显示一条垂直直线
28 */
29 vline->setFrameShape(QFrame::VLine);
30 /* 绘制阴影 */
31 vline->setFrameShadow(QFrame::Sunken);
32 }
33
34 MainWindow::~MainWindow()
35 {
36 }

在源文件“main.cpp”具体代码由新建项目时生成，无改动。

3. 运行效果

程序编译运行的结果如下。在窗口中央出现一条垂直的直线和一条水平的直线。可以用QFrame 来绘制一些比较好看的边框等，用作美化界面。QFrame 类是所有框架的窗口部件的基类，所以像 QLabel 这种见的控件也可以设置成独特的边框样式。