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

几度春风里

已于 2024-03-22 10:45:21 修改

阅读量1.1k

点赞数 19

分类专栏： Qt-C++从入门到精通文章标签： Qt Display Widgets

于 2024-03-22 10:10:58 首次发布

本文链接：https://blog.csdn.net/qq_41921826/article/details/136919332

版权

Qt-C++从入门到精通专栏收录该内容

12 篇文章 22 订阅

订阅专栏

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

几度春风里

关注

19
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
0
评论
Qt教程 — 3.6 深入了解Qt 控件：Display Widgets部件(2)

Qt Designer 显示窗口部件提供的面板中，提供了 10 种显示小部件。以下是Display Widgets 的介绍：Text Browser（文本浏览器）：QTextBrowser 是用于显示富文本文档的控件。这个部件可以显示来自本地文件或网络的HTML文档，并且可以解析HTML链接。Graphics View（图形视图）：QGraphicsView 是一个用于图形项（如线条、形状、图像等）交互的控件。
复制链接

扫一扫