7.3 显示窗口部件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（文本浏览器）、Graphics View(图形视图)在7.4小节显示窗口之浏览器介绍。
7.3.1 QLabel7.3.1.1 控件简介QLabel提供了一种用于文本或图像显示的小部件，在前7.2.11、7.2.12等小节已经出现过Label控件，只用了它显示文本，其实它还可以用于显示图像。
7.3.1.2 用法示例例22_qlbel标签显示图像或文本（难度简单），前面已经在某些小节出现过label了，但只是用来显示文本内容，实际上像button（按钮），widget，label等都是可以用来显示图像的。只是button不常用来显示单张图像，因为button是有三种状态，分别是按下，释放，悬停。所以它不常用于单单显示一张图像。
在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成如下图。
本例已经添加一张资源图片，如果不清楚如何添加资源图片，请参考7.1.4小节。添加完成如下图。
在头文件“mainwindow.h”具体代码如下
- 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”具体代码如下。
- 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”具体代码如下。由新建项目时生成，无改动。
- main.cpp编程后的代码
- 1 #include "mainwindow.h"
- 2
- 3 #include <QApplication>
- 4
- 5 int main(int argc, char *argv[])
- 6 {
- 7 QApplication a(argc, argv);
- 8 MainWindow w;
- 9 w.show();
- 10 return a.exec();
- 11 }
程序编译运行的结果如下。为了避免引起图像被压缩或者拉伸，本次设置标签的大小为452*132，这是根据图像的实际大小来设置的。
7.3.2 QCalendarWidget
7.3.2.1 控件简介QCalendarWidget继承QWidget。QCalendarWidget类提供了一个基于月的日历小部件，允许用户选择日期。CalendarWidget小部件是用当前月份和年份初始化的，QCalendarWidget还提供了几个公共插槽来更改显示的年份和月份。
7.3.2.2 用法示例例23_qcalendarwidget日历简单的使用（难度：简单），本例只是简单的使用日历控件来达到一定的效果。使用一个CalendarWidget控件，一个Label来显示当前日历所选择的日期，一个pushButton按钮，点击pushButton按钮来回到当前系统的日期。
在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成如下图。
在头文件“mainwindow.h”具体代码如下。
- 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”具体代码如下。
- 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”具体代码如下。由新建项目时生成，无改动。
- main.cpp编程后的代码
- 1 #include "mainwindow.h"
- 2
- 3 #include <QApplication>
- 4
- 5 int main(int argc, char *argv[])
- 6 {
- 7 QApplication a(argc, argv);
- 8 MainWindow w;
- 9 w.show();
- 10 return a.exec();
- 11 }
程序编译运行的结果如下。当程序运行后，可以通过点击鼠标或键盘来改变当前选定的日期，label标签则会改变为当前选定的日期，当点击回到当前日期按钮后，日历会改变当前选定的日期并且把当前选定的日期改变为系统当前的日期。拓展：可以用日历来设置生日，日期提醒等，还可以做成一个华丽的系统日历界面等。
7.3.3 QLCDNumber 7.3.3.1 控件简介QLCDNumber继承QFrame。QLCDNumber小部件显示一个类似于lcd的数字。QLCDNumber小部件可以显示任意大小的数字。它可以显示十进制、十六进制、八进制或二进制数字。使用display()插槽很容易连接到数据源，该插槽被重载以接受五种参数类型中的任何一种。
7.3.3.2 用法示例例24_qlcdnumber， LCDNumber时钟（难度：简单），使用一个LCDNumber控件作时钟的显示，一个定时器定时更新LCDNumber的时间。
在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成如下图。
在头文件“mainwindow.h”具体代码如下。
- 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”具体代码如下。
- 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”具体代码如下。由新建项目时生成，无改动。
- main.cpp编程后的代码
- 1 #include "mainwindow.h"
- 2
- 3 #include <QApplication>
- 4
- 5 int main(int argc, char *argv[])
- 6 {
- 7 QApplication a(argc, argv);
- 8 MainWindow w;
- 9 w.show();
- 10 return a.exec();
- 11 }
程序编译运行的结果如下。程序运行后，可以看到时间为当前系统的时间， LCDNumber时钟显示系统时钟的时钟并运行着。
7.3.4 QProgressBar 7.3.4.1 控件简介QProgressBar继承QWidget。QProgressBar小部件提供了一个水平或垂直的进度条。进度条用于向用户显示操作的进度，并向他们确认应用程序仍在运行。
7.3.4.2 用法示例例25_qprogressbar，手机电池充电。用一个QProgressBar模拟手机电池充电。
在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成如下图。
本例已经添加一张电池的背景图资源图片，如果不清楚如何添加资源图片，请参考7.1.4小节。添加完成如下图。
在头文件“mainwindow.h”具体代码如下。
- 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”具体代码如下。
- 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”具体代码如下。由新建项目时生成，无改动。
- main.cpp编程后的代码
- 1 #include "mainwindow.h"
- 2
- 3 #include <QApplication>
- 4
- 5 int main(int argc, char *argv[])
- 6 {
- 7 QApplication a(argc, argv);
- 8 MainWindow w;
- 9 w.show();
- 10 return a.exec();
- 11 }
程序编译运行的结果如下。程序运行后，可以看到在定时器的作用下，电池一直在充电，充到100%，又重新回到0%重新充电。QProgressBar一般用于表示进度，常用于如复制进度，打开、加载进度等。
7.3.5 QFrame 7.3.5.1 控件简介QFrame继承QWidget。QFrame类是有框架的窗口部件的基类，它绘制框架并且调用一个虚函数drawContents()来填充这个框架。这个函数是被子类重新实现的。这里至少还有两个有用的函数：drawFrame()和frameChanged()。
QPopupMenu使用这个来把菜单“升高”，高于周围屏幕。QProgressBar有“凹陷”的外观。QLabel有平坦的外观。这些有框架的窗口部件可以被改变。
QFrame::Shape这个枚举类型定义了QFrame的框架所使用的外形。当前定义的效果有：
l NoFrame - QFrame不画任何东西
l Box - QFrame在它的内容周围画一个框
l Panel - QFrame画一个平板使内容看起来凸起或者凹陷
l WinPanel - 像Panel，但QFrame绘制三维效果的方式和Microsoft Windows 95（及其它）的一样
l ToolBarPanel - QFrame调用QStyle::drawToolBarPanel()
l MenuBarPanel - QFrame调用QStyle::drawMenuBarPanel()
l HLine - QFrame绘制一个水平线，但没有框任何东西（作为分隔是有用的）
l VLine - QFrame绘制一个竖直线，但没有框任何东西（作为分隔是有用的）
l StyledPanel - QFrame调用QStyle::drawPanel()
l PopupPanel - QFrame调用QStyle::drawPopupPanel()
阴影风格有：
l Plain使用调色板的前景颜色绘制（没有任何三维效果）。
l Raised使用当前颜色组的亮和暗颜色绘制三维的凸起线。
l Sunken使用当前颜色组的亮和暗颜色绘制三维的凹陷线。
7.3.5.2 用法示例例26_qframe，水平/垂直线（难度：简单），定义两个QFrame对象，实例化后设置成一条水平样式，一条垂直样式。实际上Display Widgets里的Horizontal Line/Vertical Line 是QFrame已经封装好的控件，也可以通过下面的例子来实现不同的效果。
在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成如下图。
在头文件“mainwindow.h”具体代码如下。
- 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”具体代码如下。
- 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”具体代码如下。由新建项目时生成，无改动。
- main.cpp编程后的代码
- 1 #include "mainwindow.h"
- 2
- 3 #include <QApplication>
- 4
- 5 int main(int argc, char *argv[])
- 6 {
- 7 QApplication a(argc, argv);
- 8 MainWindow w;
- 9 w.show();
- 10 return a.exec();
- 11 }
程序编译运行的结果如下。在窗口中央出现一条垂直的直线和一条水平的直线。可以用QFrame来绘制一些比较好看的边框等，用作美化界面。QFrame类是所有框架的窗口部件的基类，所以像QLabel这种见的控件也可以设置成独特的边框样式。
/2 
|手机版|OpenEdv-开源电子网
( 粤ICP备12000418号-1 )
发表于 2022-7-27 12:47:17
