Qt——自定义富文本RichText

作者：小 琛
欢迎转载，请标明出处

产品中的富文本

用户界面中支持显示富文本格式（如加粗、斜体、不同颜色、超链接等）的文本内容。这种富文本的支持能够提供更加丰富和多样化的文本显示效果，从而增强用户体验。

富文本控件会面临的问题

1. 多语言问题：大多数产品，会有多种语言，同样的表达不同的语言会导致控件长度不同，因此需要自定义控件支持自适应
2. 样式自定义：文字类型、颜色、风格

QTextBrowser

QTextBrowser 是 Qt 框架中的一个小部件（widget），用于显示富文本和超链接文本。它是一个用于显示文本内容的可编辑小部件，支持显示富文本格式，并且可以包含超链接，允许用户点击链接来执行相关操作。

QTextBrowser 允许开发者在应用程序中以富文本的方式显示文本内容，比如格式化的文字、图像、超链接等，并且支持用户交互。它是一个非编辑的小部件，用户无法直接编辑其中的文本内容，但可以选择和复制其中的文本，并且可以点击其中的超链接来进行跳转等操作。

相较于 QTextEdit，QTextBrowser 更适用于显示只读的富文本内容，而不是用于用户编辑的目的。它也比较适合用于显示带有超链接的富文本内容，比如显示文字中的URL链接或者HTML文本中的超链接等。

在Qt应用程序中，QTextBrowser 可以用于显示格式化的帮助文档、显示静态的富文本内容、显示HTML文本等。它提供了一种简单而有效的方式，使得在界面中显示富文本内容变得更加方便和实用。

例子：自定义富文本

#pragma once
#include 

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_;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#include 
#include 

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};
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

    QFont font("Microsoft YaHei, Microsoft Sans Serif");
    font.setPixelSize(14);
    auto title = QString("
%2
")
                     .arg(font.name(QColor::HexArgb))
                     .arg(tr("Operation recorder"));
    auto titleLabel = new NemuUiLib::NemuRichText2(title, font, this);
    titleLabel
        ->setFixedWidth(titleLabel->adaptiveWidth(tr("Operation recorder"),font));
    titleLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
1
2
3
4
5
6
7
8
9

• 构造函数的定义,它接受三个参数:
  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。