作者:小 琛
欢迎转载,请标明出处
产品中的富文本
用户界面中支持显示富文本格式(如加粗、斜体、不同颜色、超链接等)的文本内容。这种富文本的支持能够提供更加丰富和多样化的文本显示效果,从而增强用户体验。
富文本控件会面临的问题
- 多语言问题:大多数产品,会有多种语言,同样的表达不同的语言会导致控件长度不同,因此需要自定义控件支持自适应
- 样式自定义:文字类型、颜色、风格
QTextBrowser
QTextBrowser 是 Qt 框架中的一个小部件(widget),用于显示富文本和超链接文本。它是一个用于显示文本内容的可编辑小部件,支持显示富文本格式,并且可以包含超链接,允许用户点击链接来执行相关操作。
QTextBrowser 允许开发者在应用程序中以富文本的方式显示文本内容,比如格式化的文字、图像、超链接等,并且支持用户交互。它是一个非编辑的小部件,用户无法直接编辑其中的文本内容,但可以选择和复制其中的文本,并且可以点击其中的超链接来进行跳转等操作。
相较于 QTextEdit,QTextBrowser 更适用于显示只读的富文本内容,而不是用于用户编辑的目的。它也比较适合用于显示带有超链接的富文本内容,比如显示文字中的URL链接或者HTML文本中的超链接等。
在Qt应用程序中,QTextBrowser 可以用于显示格式化的帮助文档、显示静态的富文本内容、显示HTML文本等。它提供了一种简单而有效的方式,使得在界面中显示富文本内容变得更加方便和实用。
例子:自定义富文本
#pragma once
#include <QTextBrowser>
class MyRichText2 : public QTextBrowser {
public:
MyRichText2 (const QString& text, const QFont& font, QWidget* parent = nullptr);
~MyRichText2 () = default;
void updateText(const QString& text);
int adaptiveWidth(const QString& text, const QFont& font);
protected:
void resizeEvent(QResizeEvent* event) override;
private:
QSize textSize(const QString& text, const QFont& font);
private:
QString text_;
};
#include <QPaintEvent>
#include <QPainter>
MyRichText2 ::MyRichText2 (const QString& text, const QFont& font, QWidget* parent) : QTextBrowser(parent) {
setFont(font);
setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
setTextInteractionFlags(Qt::LinksAccessibleByMouse);
setFocusPolicy(Qt::NoFocus);
setContextMenuPolicy(Qt::ContextMenuPolicy::NoContextMenu);
setOpenLinks(true);
setOpenExternalLinks(true);
setStyleSheet(QString("QTextBrowser{border: 0px; background-color: transparent;}"));
document()->setDocumentMargin(0);
updateText(text);
}
void MyRichText2 ::updateText(const QString& text) {
text_ = text;
setHtml(text);
document()->setTextWidth(width());
setFixedHeight(document()->size().height());
}
int MyRichText2 ::adaptiveWidth(const QString& text, const QFont& font) {
return (textSize(text, font).width() + 2);
}
void MyRichText2 ::resizeEvent(QResizeEvent* event) {
updateText(text_);
QTextBrowser::resizeEvent(event);
}
QSize MyRichText2::textSize(const QString& text, const QFont& font) {
const QFontMetrics metrics(font);
const int width = metrics.width(text);
const int height = metrics.height();
return {width, height};
}
QFont font("Microsoft YaHei, Microsoft Sans Serif");
font.setPixelSize(14);
auto title = QString("<p align=\"left\" style=\"color: %1;\">%2</p>")
.arg(font.name(QColor::HexArgb))
.arg(tr("testing"));
auto titleLabel = new MyRichText2(title, font, this);
titleLabel
->setFixedWidth(titleLabel->adaptiveWidth(tr("testing"),font));
titleLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
- 构造函数的定义,它接受三个参数:
text: 要显示的文本内容
font: 要使用的字体
parent: 父 Widget - setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff); 和 setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);:
设置垂直和水平滚动条策略为始终隐藏。 - setTextInteractionFlags(Qt::LinksAccessibleByMouse);:
设置文本交互标志,使得文本中的链接可以通过鼠标访问。 - setFocusPolicy(Qt::NoFocus);:
设置焦点策略为无焦点,即该控件不能获得焦点。 - setContextMenuPolicy(Qt::ContextMenuPolicy::NoContextMenu);:
设置上下文菜单策略为无上下文菜单,即禁用了控件的右键菜单。 - setOpenLinks(true); 和 setOpenExternalLinks(true);:
设置是否打开链接和外部链接。 - setStyleSheet(QString(“QTextBrowser{border: 0px; background-color: transparent;}”));:
设置控件的样式表,去掉边框并设置背景为透明。 - document()->setDocumentMargin(0);:
设置文档的边距为 0。