Qt 控件之显示窗口部件

原创

andyxi_linux 2023-08-12 10:13:57 ©著作权

文章标签 qt 开发语言 Qt Creater #include 源文件 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者andyxi_linux的原创作品，请联系作者获取转载授权，否则将追究法律责任

Qt 控件之显示窗口部件

Qt Designer 显示窗口部件提供了10种显示小部件：

Label:标签
Text Browser：文本浏览器
Graphics View：图形视图
Calendar Widget：日历
LCD Number：液晶数字
Progress Bar：进度条
Horizontal Line：水平线
Vertial Line：垂直线
OpenGL Widget：开放式图形库工具
QQuick Widget：嵌入式 QML 工具

下面将通过实例讲解每种显示窗口部件是如何使用，并能实现什么效果

1. QLabel

QLabel 类提供一种用于文本或图像显示的小部件

以下实例实现的效果：显示一张图片

创建新项目，注意不勾选 “Generate form”，默认继承 QMainWindow 类
按照如何在 Qt Creater 中添加资源文件一文中介绍的方法添加图片文件
头文件 “mainwindow.h” 中具体代码如下

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QLabel>

class MainWindow : public QMainWindow
{
	Q_OBJECT

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

private:
	/* 用一个 QLabel 对象用于显示字符串 */
	QLabel *labelString;
	/* 用一个 QLabel 对象用于显示图像 */
	QLabel *labelImage;
};
#endif // MAINWINDOW_H

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

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent)
{
	/* 设置大小与位置 */
	this->setGeometry(0, 0, 800, 480);
	/* 使用资源里的文件时格式是 :+前缀+文件路径 */
	QPixmap pixmap(":images/openedv.png");

	labelImage = new QLabel(this);
	/* 标签大小为 452×132,根据图像的大小来设置 */
	labelImage->setGeometry(180, 150, 452, 132);
	/* 设置图像 */
	labelImage->setPixmap(pixmap);
	/* 开启允许缩放填充 */
	labelImage->setScaledContents(true);

	labelString = new QLabel(this);
	labelString->setText("Label Test");
	labelString->setGeometry(300, 300, 100, 20);
}

MainWindow::~MainWindow()
{
}

源文件 “main.cpp” 代码，由新建项目时生成，无需改动
程序编译及运行后，会将图片显示出来

2. QCalendarWidget

QCalendarWidget 类提供一个基于月的日历小部件，允许用户选择日期

以下实例实现的效果：使用日历控件，显示日期

创建新项目，注意不勾选 “Generate form”，默认继承 QMainWindow 类
头文件 “mainwindow.h” 中具体代码如下

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QCalendarWidget>
#include <QPushButton>
#include <QLabel>

class MainWindow : public QMainWindow
{
	Q_OBJECT

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

private:
	/* 声明 QCalendarWidget， QPushButton， QLabel 对象 */
	QCalendarWidget *calendarWidget;
	QPushButton *pushButton;
	QLabel *label;

private slots:
	/* 槽函数 */
	void calendarWidgetSelectionChanged();
	void pushButtonClicked();
};
#endif // MAINWINDOW_H

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

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent)
{
	/* 设置大小与位置 */
	this->setGeometry(0, 0, 800, 480);
	/* 对象实例化设置显示的位置与大小 */
	calendarWidget = new QCalendarWidget(this);
	calendarWidget->setGeometry(200, 20, 400, 300);

	QFont font;
	/* 设置日历里字体的大小为 10 像素 */
	font.setPixelSize(10);
	calendarWidget->setFont(font);

	/* 对象实例化设置显示的位置与大小 */
	pushButton = new QPushButton("回到当前日期",this);
	pushButton->setGeometry(200, 350, 100, 30);

	/* 对象实例化设置显示的位置与大小 */
	label = new QLabel(this);
	label->setGeometry(400, 350, 400, 30);
	QString str = "当前选择的日期:" + calendarWidget->selectedDate().toString();
	label->setText(str);

	/* 信号槽连接 */
	connect(calendarWidget, SIGNAL(selectionChanged()), this, SLOT(calendarWidgetSelectionChanged()));
	connect(pushButton, SIGNAL(clicked()), this, SLOT(pushButtonClicked()));
}

MainWindow::~MainWindow()
{
}

void MainWindow::calendarWidgetSelectionChanged()
{
	/* 当日历点击改变当前选择的期时，更新 Label 的显示内容 */
	QString str = "当前选择的日期:" + calendarWidget->selectedDate().toString();
	label->setText(str);
}

void MainWindow::pushButtonClicked()
{
	/* 设置当前选定的日期为系统的 QDate */
	calendarWidget->setSelectedDate(QDate::currentDate());
}

源文件 “main.cpp” 代码，由新建项目时生成，无需改动
程序编译及运行后，可以通过点击鼠标或键盘来改变当前选定的日期， label 标签则会改变为当前选定的日期，当点击回到当前日期按钮后，日历会改变当前选定的日期并且把当前选定的日期改变为系统当前的日期

3. QLCDNumber

QLCDNumber类提供一个类似于 lcd 的数字显示

以下实例实现的效果：使用LCD控件，显示时钟

创建新项目，注意不勾选 “Generate form”，默认继承 QMainWindow 类
头文件 “mainwindow.h” 中具体代码如下

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QMainWindow>
#include <QLCDNumber>
#include <QTimer>
#include <QTime>

class MainWindow : public QMainWindow
{
	Q_OBJECT

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

private:
	/* 声明 QLCDNumber 对象 */
	QLCDNumber *lcdNumber;
	/* 声明 QTimer 对象 */
	QTimer *timer;

private slots:
	/* 槽函数 */
	void timerTimeOut();
};
#endif // MAINWINDOW_H

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

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent)
{
	/* 设置主窗体的大小与位置 */
	this->setGeometry(0, 0, 800, 480);
	/* 实例化与设置显示的位置大小*/
	lcdNumber = new QLCDNumber(this);
	lcdNumber->setGeometry(300, 200, 200, 50);
	/* 设置显示的位数 8 位 */
	lcdNumber->setDigitCount(8);
	/* 设置样式 */
	lcdNumber->setSegmentStyle(QLCDNumber::Flat);
	/* 设置 lcd 显示为当前系统时间 */
	QTime time = QTime::currentTime();
	/* 设置显示的样式 */
	lcdNumber->display(time.toString("hh:mm:ss"));
	timer = new QTimer(this);
	/* 设置定时器 1000 毫秒发送一个 timeout()信号 */
	timer->start(1000);
	/* 信号槽连接 */
	connect(timer, SIGNAL(timeout()), this, SLOT(timerTimeOut()));
}

MainWindow::~MainWindow()
{
}

void MainWindow::timerTimeOut()
{
	/* 当定时器计时 1000 毫秒后，刷新 lcd 显示当前系统时间 */
	QTime time = QTime::currentTime();
	/* 设置显示的样式 */
	lcdNumber->display(time.toString("hh:mm:ss"));
}

源文件 “main.cpp” 代码，由新建项目时生成，无需改动
程序编译及运行后，可以看到时间为当前系统的时间

4. QProgressBar

QProgressBar 类提供一个水平或垂直的进度条

以下实例实现的效果：模拟手机充电进度条

创建新项目，注意不勾选 “Generate form”，默认继承 QMainWindow 类
按照如何在 Qt Creater 中添加资源文件一文中介绍的方法添加一张电池背景图文件
头文件 “mainwindow.h” 中具体代码如下

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QProgressBar>
#include <QTimer>

class MainWindow : public QMainWindow
{
	Q_OBJECT

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

private:
	/* 声明对象 */
	QProgressBar *progressBar;
	QTimer *timer;
	/* 用于设置当前 QProgressBar 的值 */
	int value;

private slots:
	/* 槽函数 */
	void timerTimeOut();
};
#endif // MAINWINDOW_H

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

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent)
{
	/* 设置主窗体位置与大小 */
	this->setGeometry(0, 0, 800, 480);
	progressBar = new QProgressBar(this);
	progressBar->setGeometry(300, 200, 200, 60);
	/*样式表设置，常用使用 setStyleSheet 来设置样式（实现界面美化的功能）*/
	progressBar->setStyleSheet (
		"QProgressBar{border:8px solid #FFFFFF;"
		"height:30;"
		"border-image:url(:/images/battery.png);" //背景图片
		"text-align:center;" // 文字居中
		"color:rgb(255,0,255);"
		"font:20px;" // 字体大小为 20px
		"border-radius:10px;}"
		"QProgressBar::chunk{"
		"border-radius:5px;" // 斑马线圆角
		"border:1px solid black;" // 黑边，默认无边
		"background-color:skyblue;"
		"width:10px;margin:1px;}" // 宽度和间距
	);

	/* 设置 progressBar 的范围值 */
	progressBar->setRange(0, 100);
	/* 初始化 value 为 0 */
	value = 0;
	/* 给 progressBar 设置当前值 */
	progressBar->setValue(value);
	/* 设置当前文本字符串的显示格式 */
	progressBar->setFormat("充电中%p%");
	/* 定时器实例化设置每 100ms 发送一个 timeout 信号 */
	timer = new QTimer(this);
	timer->start(100);
	/* 信号槽连接 */
	connect(timer, SIGNAL(timeout()), this, SLOT(timerTimeOut()));
}

MainWindow::~MainWindow()
{
}

void MainWindow::timerTimeOut()
{
	/* 定显示器时间到， value 值自加一 */
	value ++;
	progressBar->setValue(value);
	/* 若 value 值大于 100，令 value 再回到 0 */
	if(value>100)
		value = 0;
}

源文件 “main.cpp” 代码，由新建项目时生成，无需改动
程序编译及运行后，可见进度条在动作

5. QFrame

QFrame 类是有框架的窗口部件的基类，它绘制框架并且调用一个虚函数 drawContents()来填充这个框架。常用的函数有： drawFrame()和 frameChanged()、QPopupMenu 可将菜单升高，高于周围屏幕，QFrame::Shape 这个枚举类型定义了 QFrame 的框架所使用的外形

以下实例实现的效果：定义两个 QFrame 对象，设置成一条水平样式，一条垂直样式

创建新项目，注意不勾选 “Generate form”，默认继承 QMainWindow 类
头文件 “mainwindow.h” 中具体代码如下

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QFrame>

class MainWindow : public QMainWindow
{
	Q_OBJECT

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

private:
	/* 声明对象 */
	QFrame *hline;
	QFrame *vline;
};
#endif // MAINWINDOW_H

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

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent)
{
	/* 设置主窗体的显示位置与大小 */
	this->setGeometry(0, 0, 800, 480);
	/* 实例化 */
	hline = new QFrame(this);
	/* 确定起始点，设置长和宽，绘制距形 */
	hline->setGeometry(QRect(200, 100, 400, 40));
	/* 设置框架样式为 Hline，水平，可设置为其他样式例如 Box，由于是样式选择 HLine，所以只显示一条水平直线 */
	hline->setFrameShape(QFrame::HLine);
	/* 绘制阴影 */
	hline->setFrameShadow(QFrame::Sunken);
	/* 实例化 */
	vline = new QFrame(this);
	/* 确定起始点，设置长和宽，绘制距形 */
	vline->setGeometry(QRect(300, 100, 2, 200));
	/* 设置框架样式为 Vline，垂直，可设置为其他样式例如 Box，由于是样式选择 Vline，所以只显示一条垂直直线 */
	vline->setFrameShape(QFrame::VLine);
	/* 绘制阴影 */
	vline->setFrameShadow(QFrame::Sunken);
}

MainWindow::~MainWindow()
{
}

源文件 “main.cpp” 代码，由新建项目时生成，无需改动
程序编译及运行后，在窗口中央出现一条垂直的直线和一条水平的直线

6. QTextBrowser

QTextBrowser 类提供一个具有超文本导航的文本浏览器

以下实例实现的效果：设计一个文本浏览器程序，可以打开并显示 txt、 html 等文件

创建新项目，注意不勾选 “Generate form”，默认继承 QMainWindow 类，勾选 mainwindow.ui
头文件 “mainwindow.h” 中具体代码如下

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QTextBrowser>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
	Q_OBJECT

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

private:
	Ui::MainWindow *ui;
	/* 声明对象 */
	QTextBrowser *textBrowser;
	QAction *openAction;

private slots:
	/* 槽函数 */
	void openActionTriggered();
};
#endif // MAINWINDOW_H

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

#include "mainwindow.h"
#include "ui_mainwindow.h"
/* 窗口对话框与文本流 */
#include <QFileDialog>
#include <QTextStream>

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow)
{
	ui->setupUi(this);
	/* 设置主窗体位置与大小 */
	this->setGeometry(0, 0, 800, 480);
	/* 将窗口标题设置为文本浏览器 */
	this->setWindowTitle("文本浏览器");
	/* 实例化 */
	textBrowser = new QTextBrowser(this);
	/* 将文本浏览器窗口居中 */
	this->setCentralWidget(textBrowser);
	/* 实例化 */
	openAction = new QAction("打开",this);
	/* ui 窗口自带有 menubar(菜单栏)、 mainToolbar（工具栏）与 statusbar（状态栏）
     * menuBar 是 ui 生成工程就有的，所以可以在 menubar 里添加 QActiont 等，如果
     * 不需要 menubar，可以在 ui 设计窗口里，在右则对象里把 menubar 删除，再自己
     * 重新定义自己的菜单栏 */
	/* 将动作添加到菜单栏 */
	ui->menubar->addAction(openAction);
	/* 信号槽连接 */
	connect(openAction, SIGNAL(triggered()), this, SLOT(openActionTriggered()));
}

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

void MainWindow::openActionTriggered()
{
	/* 调用系统打开文件窗口，过滤文件名 */
	QString fileName = QFileDialog::getOpenFileName(this,tr("打开文件"),"",tr("Files(*.txt *.cpp *.h *.html *.htm)"));
	QFile myFile(fileName);
	/* 以只读、文本方式打开，若打开失败，则返回 */
	if(!myFile.open(QIODevice::ReadOnly | QIODevice::Text))
		return;

	/* 用 QTextStream 对象接收 */
	QTextStream in (&myFile);
	/* 读取全部数据 */
	QString myText = in.readAll();
	/* 判断打开文件的后缀，如果是 html 格式的则设置文本浏览器为 html 格式 */
	if(fileName.endsWith("html") || fileName.endsWith("htm")){
		textBrowser->setHtml(myText);
	} else {
		textBrowser->setPlainText(myText);
	}

	/* ui 窗口自带有 statusbar（状态栏），设置打开的文件名 */
	ui->statusbar->showMessage("文件名： " + fileName);
}

源文件 “main.cpp” 代码，由新建项目时生成，无需改动
程序编译及运行后，可选择一个可打开的文件，文件内容将会显示出来

7. QGraphicsView

QGraphicsView 类是图形视图框架的一部分，提供了基于图元的模型/视图编程

以下实例实现的效果：设计一个图像浏览器

创建新项目，注意不勾选 “Generate form”，默认继承 QMainWindow 类，勾选 mainwindow.ui
头文件 “mainwindow.h” 中具体代码如下

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QGraphicsView>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
	Q_OBJECT

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

private:
	Ui::MainWindow *ui;
	/* 声明对象 */
	QGraphicsView *graphicsView;
	QGraphicsScene *graphicsScene;
	QAction *openAction;

private slots:
	/* 槽函数 */
	void openActionTriggered();
};
#endif // MAINWINDOW_H

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

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QFileDialog>

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow)
{
	ui->setupUi(this);
	/* 设置主窗体大小 */
	this->setGeometry(0, 0, 800, 480);
	/* 将窗口标题设置为图像浏览器 */
	this->setWindowTitle("图像浏览器");
	/* 实例化图形视图对象 */
	graphicsView = new QGraphicsView(this);
	/* 将图像浏览器窗口居中 */
	this->setCentralWidget(graphicsView);
	/* 实例化场景对象 */
	graphicsScene = new QGraphicsScene(this);
	/* 在 QGraphicsView 设置场景 */
	graphicsView->setScene(graphicsScene);
	/* 将动作添加到菜单栏 */
	openAction = new QAction("打开",this);
	ui->menubar->addAction(openAction);
	/* 信号槽连接 */
	connect(openAction, SIGNAL(triggered()), this, SLOT(openActionTriggered()));
}

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

void MainWindow::openActionTriggered()
{
	/*调用系统打开文件窗口，设置窗口标题为“打开文件”，过滤文件名*/
	QString fileName = QFileDialog::getOpenFileName(this,tr("打开文件"), "", tr("Files(*.png *.jpg *.bmp)"));
	/* 定义 QPixmap 对象，指向 fileName */
	QPixmap image(fileName);
	/* 将 image 用 scaled 来重新设置长宽为 graphicsView 的长宽，保持纵横比等*/

	/* 假若用户没选择文件，则返回 */
	if(image.isNull())
		return;
	image = image.scaled(graphicsView->width(), graphicsView->height(), Qt::KeepAspectRatio, Qt::FastTransformation);
	/* 在添加场景内容前，先清除之前的场景内容 */
	graphicsScene->clear();
	/* 添加场景内容 image */
	graphicsScene->addPixmap(image);
	/* ui 窗口自带有 statusBar（状态栏），设置打开的文件名 */
	ui->statusbar->showMessage("文件名： " + fileName);
}