Qt教程 — 3.6 深入了解Qt 控件：Display Widgets部件(2)

目录

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 的介绍：

1. Text Browser（文本浏览器）：QTextBrowser 是用于显示富文本文档的控件。这个部件可以显示来自本地文件或网络的HTML文档，并且可以解析HTML链接。

2. 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_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic: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_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic: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 对象，指向 fileNameQPixmap image(fileName);// 将 image 用 scaled 来重新设置长宽为 graphicsView 的长宽，保持纵横比等// 假若用户没选择文件，则返回if(image.isNull())return;image = image.scaled(graphicsView->width(),graphicsView->height(),Qt::KeepAspectRatio,Qt::FastTransformation);// 在添加场景内容前，先清除之前的场景内容graphicsScene->clear();// 添加场景内容 imagegraphicsScene->addPixmap(image);// ui 窗口自带有 statusBar（状态栏），设置打开的文件名ui->statusbar->showMessage("文件名： " + fileName);
}

（4） 程序编译运行的结果如下。菜单栏点击打开后，系统默认是打开的最近打开的位置，选择任意一个可打开的图片。

​