目录
1 Display Widgets简介
2 如何使用Display Widgets部件
2.1 QTextBrowser组件-简单的文本浏览器
2.2 QGraphicsView组件-简单的图像浏览器
Display Widgets将分为两篇文章介绍
文章1(Qt教程 — 3.5 深入了解Qt 控件:Display Widgets部件-CSDN博客):Label(标签)、Calendar Widget(日历)、LCD Number(液晶数字)、Progress Bar(进度条)、Horizontal Line(水平线)、Vertical Line(垂直线)、OpenGL Widget(开放式图形库工具)、QQuick Widget(嵌入式 QML 工具)
文章2(本文):Text Browser(文本浏览器)、Graphics View(图形视图)
1 Display Widgets简介
Qt Designer 显示窗口部件提供的面板中,提供了 10 种显示小部件。以下是Display Widgets 的介绍:
-
Text Browser(文本浏览器):QTextBrowser 是用于显示富文本文档的控件。这个部件可以显示来自本地文件或网络的HTML文档,并且可以解析HTML链接。
-
Graphics View(图形视图):QGraphicsView 是一个用于图形项(如线条、形状、图像等)交互的控件。它是基于场景(QGraphicsScene)和视图(QGraphicsView)框架的一部分,用于管理和显示复杂的图形界面。
2 如何使用Display Widgets部件
2.1 QTextBrowser组件-简单的文本浏览器
QTextBrowser
是 Qt 中用于显示富文本内容的组件,可以显示格式化的文本、图片和超链接等。
QTextBrowser
继承自QTextEdit
,用于显示富文本内容,支持 HTML 标记。- 可以显示静态文本、超链接、表格、图片等富文本内容。
- 用户可以选择文本内容、复制文本内容和点击超链接。
- 可以设置文本颜色、字体、对齐方式等样式。
- 支持滚动条,可以滚动查看大段文本内容。
下面详细介绍一下QTextBrowser
的全部功能设置和参数:
-
设置文本内容。
ui->textBrowser->setText("Hello, world!");
-
设置 HTML 格式的文本内容。
ui->textBrowser->setHtml("<b>Hello</b>, <i>world</i>!");
-
设置文本颜色。
ui->textBrowser->setTextColor(Qt::blue);
-
设置文本字体。
ui->textBrowser->setFont(QFont("Arial", 12));
-
设置文本对齐方式。
ui->textBrowser->setAlignment(Qt::AlignCenter);
-
设置文本是否只读。
ui->textBrowser->setReadOnly(true);
-
获取当前文本内容。
QString text = ui->textBrowser->toPlainText();
clear():清空文本内容。ui->textBrowser->clear();
-
链接点击事件处理。
connect(ui->textBrowser, &QTextBrowser::anchorClicked, this, &MyClass::onAnchorClicked);
-
获取文本显示区域的视口。
QWidget *viewport = ui->textBrowser->viewport();
本例设计一个文本浏览器程序,可以打开并显示 txt、 html 等文件。本小节还用到 QAction,菜单栏,学习文件的打开以及处理等。
(1)首先按照文章新建项目(Qt教程 — 1.3 如何创建Qt项目-CSDN博客)。
(2)在头文件“mainwindow.h”修改代码,具体代码如下。1)导入<QTextBrowser>文件 —> 2)声明一个QTextBrowser、QAction对象用于显示字符串和图像。完整代码如下。
#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
(3)在文件“mainwindow.cpp”修改代码,具体代码如下。 1)设置主窗体的显示位置与大小,将窗口标题设置为文本浏览器。—>2)实例化QTextBrowser对象,将文本浏览器窗口居中。—>3)实例化QAction,将动作添加到菜单栏。—>4)信号槽连接。—>5)编写打开文件的槽函数。
#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(状态栏)
// 将动作添加到菜单栏
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);
}
(4)程序编译运行的结果如下。在菜单栏点击打开后,系统默认是打开的最近打开的位置,选择任意一个可打开的文件,本次打开的是该工程中的 mainwindow.h 文件,结果如下图。根据上面的例子可自行拓展打造自己的文本浏览器,例如在菜单栏上加上关闭动作等,在工具栏还可以添加字体颜色,与及背景颜色,以及字体的放大与缩小等,可自行拓展。
2.2 QGraphicsView组件-简单的图像浏览器
QGraphicsView
是Qt中用于显示QGraphicsScene
中图形项的组件。它提供了对图形场景中项的视图,并允许用户进行缩放、平移和交互操作。以下是QGraphicsView
的一些常用功能和设置详解:
- 显示场景内容:
QGraphicsView
用于显示QGraphicsScene
中的图形项,可以通过setScene()
方法将场景设置到视图中。 -
视图变换:缩放:可以通过
scale()
方法进行视图的缩放操作。平移:可以通过translate()
方法进行视图的平移操作。旋转:可以通过rotate()
方法进行视图的旋转操作。 -
视图交互:鼠标拖拽:可以通过设置
setDragMode()
方法来启用或禁用鼠标拖拽功能。滚轮缩放:可以通过设置setTransformationAnchor()
方法来指定缩放的中心点。 -
背景设置:可以通过
setBackgroundBrush()
方法设置视图的背景颜色或背景画刷。 -
边界设置:可以通过
setSceneRect()
方法设置视图的边界矩形,限制显示的区域。 -
视图更新:可以通过
update()
方法手动更新视图内容。 -
坐标转换:可以通过
mapToScene()
和mapFromScene()
等方法进行视图坐标和场景坐标之间的转换。 -
视图大小策略:可以通过
setResizeAnchor()
和setAlignment()
等方法设置视图的大小策略和对齐方式。 -
视图边框:可以通过
setFrameShape()
和setFrameShadow()
等方法设置视图的边框形状和阴影效果。 -
视图渲染:可以通过
setRenderHint()
方法设置视图的渲染选项,如抗锯齿、平滑等。
本例设计一个图像浏览器程序,在上一节一的基础上,将它改变为图像浏览器。
(1)首先按照文章新建项目(Qt教程 — 1.3 如何创建Qt项目-CSDN博客)。
(2)在头文件“mainwindow.h”修改代码,具体代码如下。1)导入<QGraphicsView>文件 —> 2)声明 QGraphicsView,QGraphicsScene, QAction对象和槽函数。完整代码如下。
#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
(3)在文件“mainwindow.cpp”修改代码,具体代码如下。 1)设置主窗体的显示位置与大小,将窗口标题设置为图像浏览器。—>2)实例化QTextBrowser对象,将图像浏览器窗口居中。—>3)实例化QAction,将动作添加到菜单栏。—>4)信号槽连接。—>5)编写打开图像的槽函数。
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QFileDialog>
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
/***** 1 *****/
// 设置主窗体位置与大小
this->setGeometry(0, 0, 800, 480);
/***** 2 *****/
// 将窗口标题设置为图像浏览器
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);
}
(4) 程序编译运行的结果如下。菜单栏点击打开后,系统默认是打开的最近打开的位置,选择任意一个可打开的图片。