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