Qt控件----显示窗口部件之浏览器

一、QTextBrowser

1. 控件简介

QTextBrowser 继承 QTextEdit，QTextBrowser 类提供了一个具有超文本导航的文本浏览器。该类扩展了 QTextEdit(在只读模式下)，添加了一些导航功能，以便用户可以跟踪超文本文档中的链接。

2. 用法示例

例 27_qtextbrowser，简单的文本浏览器（难度：简单），本例设计一个文本浏览器程序，可以打开并显示 txt、html 等文件。本小节还用到 QAction，菜单栏，学习文件的打开以及处理等。

在新建例程默认继承 QMainWindow 类即可。勾选 mainwindow.ui，因为我们要在工具栏里添加按钮来打开文件等操作。新建项目完成如下。

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

1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QTextBrowser>
6
7 QT_BEGIN_NAMESPACE
8 namespace Ui { class MainWindow; }
9 QT_END_NAMESPACE
10
11 class MainWindow : public QMainWindow
12 {
13 Q_OBJECT
14
15 public:
16 MainWindow(QWidget *parent = nullptr);
17 ~MainWindow();
18
19 private:
20 Ui::MainWindow *ui;
21 /* 声明对象 */
22 QTextBrowser *textBrowser;
23 QAction *openAction;
24
25 private slots:
26 /* 槽函数 */
27 void openActionTriggered();
28 };
29 #endif // MAINWINDOW_H

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

1 #include "mainwindow.h"
2 #include "ui_mainwindow.h"
3 /* 窗口对话框与文本流 */
4 #include <QFileDialog>
5 #include <QTextStream>
6
7 MainWindow::MainWindow(QWidget *parent)
8 : QMainWindow(parent)
9 , ui(new Ui::MainWindow)
10 {
11 ui->setupUi(this);
12 /* 设置主窗体位置与大小 */
13 this->setGeometry(0, 0, 800, 480);
14
15 /* 将窗口标题设置为文本浏览器 */
16 this->setWindowTitle("文本浏览器");
17
18 /* 实例化 */
19 textBrowser = new QTextBrowser(this);
20 /* 将文本浏览器窗口居中 */
21 this->setCentralWidget(textBrowser);
22
23 /* 实例化 */
24 openAction = new QAction("打开",this);
25 /* ui 窗口自带有 menubar(菜单栏)、mainToolbar（工具栏）与
26 * statusbar（状态栏）
27 * menuBar 是 ui 生成工程就有的，所以可以在 menubar 里添加
28 * 我们的 QActiont 等，如果不需要 menubar，可以在 ui 设计
29 * 窗口里，在右则对象里把 menubar 删除，再自己重新定义自己的
30 * 菜单栏
31 */
32 /* 将动作添加到菜单栏 */
33 ui->menubar->addAction(openAction);
34
35 /* 信号槽连接 */
36 connect(openAction, SIGNAL(triggered()),
37 this, SLOT(openActionTriggered()));
38
39 }
40
41 MainWindow::~MainWindow()
42 {
43 delete ui;
44 }
45
46 void MainWindow::openActionTriggered()
47 {
48 /* 调用系统打开文件窗口，过滤文件名 */
49 QString fileName = QFileDialog::getOpenFileName(
50 this,tr("打开文件"),"",
51 tr("Files(*.txt *.cpp *.h *.html *.htm)")
52 );
53 QFile myFile(fileName);
54 /* 以只读、文本方式打开，若打开失败，则返回 */
55 if(!myFile.open(QIODevice::ReadOnly | QIODevice::Text))
56 return;
57
58 /* 用 QTextStream 对象接收 */
59 QTextStream in (&myFile);
60
61 /* 读取全部数据 */
62 QString myText = in.readAll();
63
64 /* 判断打开文件的后缀，如果是 html 格式的则设置文本浏览器为 html 格式 */
65 if(fileName.endsWith("html") || fileName.endsWith("htm")){
66 textBrowser->setHtml(myText);
67 } else {
68 textBrowser->setPlainText(myText);
69 }
70
71 /* ui 窗口自带有 statusbar（状态栏），设置打开的文件名 */
72 ui->statusbar->showMessage("文件名：" + fileName);
73 }

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

3. 运行效果

程序编译运行的结果如下。在菜单栏点击打开后，系统默认是打开的最近打开的位置，选择任意一个可打开的文件，本次打开的是该工程中的 mainwindow.cpp 文件，结果如下图。根据上面的例子可自行拓展打造自己的文本浏览器，例如在菜单栏上加上关闭动作等，在工具栏还可以添加字体颜色，与及背景颜色，以及字体的放大与缩小等，可自行拓展。

二、QGraphicsView

在这里主要是简单介绍 QGraphicsView 这种框架类的介绍与常用接口，实际上这种框架过于复杂，我们也不能在这一小节完全展现，下面就让我们快速去了解 QGraphicsView 图形视图框架类吧！

1. 控件简介

QGraphicsView 继承 QAbstractScrollArea。QGraphicsView 是图形视图框架的一部分，它提供了基于图元的模型/视图编程。QGraphicsView在可滚动视图中可视化QGraphicsScene的内容。
要创建带有几何项的场景，请参阅 QGraphicsScene 的文档。
要可视化场景，首先构造一个 QGraphicsView 对象，将要可视化的场景的地址传递给 QGraphicsView 的构造函数。或者，可以调用 setScene()在稍后设置场景。

2. 用法示例

例 28_qgraphicsview，简单的图像浏览器（难度：简单），本例设计一个图像浏览器程序，在上一节一的基础上，将它改变为图像浏览器。

在新建例程默认继承 QMainWindow 类即可。勾选 mainwindow.ui，因为我们要在工具栏里添加按钮来打开文件等操作。新建项目完成如下。

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

1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QGraphicsView>
6
7 QT_BEGIN_NAMESPACE
8 namespace Ui { class MainWindow; }
9 QT_END_NAMESPACE
10
11 class MainWindow : public QMainWindow
12 {
13 Q_OBJECT
14
15 public:
16 MainWindow(QWidget *parent = nullptr);
17 ~MainWindow();
18
19 private:
20 Ui::MainWindow *ui;
21 /* 声明对象 */
22 QGraphicsView *graphicsView;
23 QGraphicsScene *graphicsScene;
24 QAction *openAction;
25
26 private slots:
27 /* 槽函数 */
28 void openActionTriggered();
29
30 };
31 #endif // MAINWINDOW_H

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

1 #include "mainwindow.h"
2 #include "ui_mainwindow.h"
3 #include <QFileDialog>
4
5 MainWindow::MainWindow(QWidget *parent)
6 : QMainWindow(parent)
7 , ui(new Ui::MainWindow)
8 {
9 ui->setupUi(this);
10 /* 设置主窗体大小 */
11
12 this->setGeometry(0, 0, 800, 480);
13 /* 将窗口标题设置为图像浏览器 */
14 this->setWindowTitle("图像浏览器");
15
16 /* 实例化图形视图对象 */
17 graphicsView = new QGraphicsView(this);
18 /* 将图像浏览器窗口居中 */
19 this->setCentralWidget(graphicsView);
20
21 /* 实例化场景对象 */
22 graphicsScene = new QGraphicsScene(this);
23
24 /* 在 QGraphicsView 设置场景 */
25 graphicsView->setScene(graphicsScene);
26
27 /* 将动作添加到菜单栏 */
28 openAction = new QAction("打开",this);
29 ui->menubar->addAction(openAction);
30
31 /* 信号槽连接 */
32 connect(openAction, SIGNAL(triggered()),
33 this, SLOT(openActionTriggered()));
34 }
35
36 MainWindow::~MainWindow()
37 {
38 delete ui;
39 }
40
41 void MainWindow::openActionTriggered()
42 {
43 /*调用系统打开文件窗口，设置窗口标题为“打开文件”，过滤文件名*/
44 QString fileName = QFileDialog::getOpenFileName(
45 this,tr("打开文件"), "",
46 tr("Files(*.png *.jpg *.bmp)")
47 );
48 /* 定义 QPixmap 对象，指向 fileName */
49 QPixmap image(fileName);
50 /* 将 image 用 scaled 来重新设置长宽为 graphicsView 的长宽，
51 * 保持纵横比等
52 */
53
54 /* 假若用户没选择文件，则返回 */
55 if(image.isNull())
56 return;
57 image = image.scaled(graphicsView->width(),
58 graphicsView->height(),
59 Qt::KeepAspectRatio,
60 Qt::FastTransformation
61 );
62 /* 在添加场景内容前，先清除之前的场景内容 */
63 graphicsScene->clear();
64 /* 添加场景内容 image */
65 graphicsScene->addPixmap(image);
66 /* ui 窗口自带有 statusBar（状态栏），设置打开的文件名 */
67 ui->statusbar->showMessage("文件名：" + fileName);
68 }

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

3. 运行效果

程序编译运行的结果如下。菜单栏点击打开后，系统默认是打开的最近打开的位置，选择任意一个可打开的图片。（备注：本例所展示的图片已经放在工程目录下）。