Qt之QTableView显示富文本

最新推荐文章于 2024-04-19 09:28:51 发布
最新推荐文章于 2024-04-19 09:28:51 发布
阅读量1.2k 收藏
点赞数
原文链接：https://yq.aliyun.com/articles/120045
版权

简述

对于QTableView中的显示，我们前面介绍过很多种，其中包括：文本、进度条、复选框等，今天我们介绍一下关于富文本的显示。

可能绝大多数小伙伴会通过QAbstractTableModel中的data来实现，可是现实告诉我们，那是行不通的，那么我们如何去显示呢？请看正文。

效果

这里写图片描述

源码

下面我们使用QAbstractItemDelegate来进行富文本的显示，主要通过QTextDocument设置HTML代码来实现。

void CheckBoxDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    QStyleOptionViewItem viewOption(option);
    initStyleOption(&viewOption, index);
    if (option.state.testFlag(QStyle::State_HasFocus))
        viewOption.state = viewOption.state ^ QStyle::State_HasFocus;

    // ... 省略
    // 设置显示文本为空，使用默认样式
    QStyle *pStyle = viewOption.widget? viewOption.widget->style() : QApplication::style();

    viewOption.text = "";
    pStyle->drawControl(QStyle::CE_ItemViewItem, &viewOption, painter, viewOption.widget);

    // 需要显示的HTML
    QString strHTML = QString("<html> \
                              <head> \
                              <style> \
                              font{font-size:18px; color:white;} #f{font-size:26px; color: green;} \
                              </style> \
                              </head> \
                              <body>\
                              <font>%1</font><font id=\"f\">%2</font> \
                              <img src=\":/Images/logo\" width=\"40\" height=\"40\"> \
                              </body> \
                              </html>").arg("I am a ").arg("Qter");

    QTextDocument doc;
    doc.setHtml(strHTML);

    QAbstractTextDocumentLayout::PaintContext paintContext;

    QRect textRect = pStyle->subElementRect(QStyle::SE_ItemViewItemText, &viewOption);
    painter->save();
    // 坐标变换，将左上角设置为原点
    painter->translate(textRect.topLeft());
    // 设置HTML绘制区域
    painter->setClipRect(textRect.translated(-textRect.topLeft()));

    doc.documentLayout()->draw(painter, paintContext);
    painter->restore();
}

分析

首先我们需要保留原有样式，所以设置QStyleOptionViewItem的文本为空，然后调用QStyle的drawControl接口来进行绘制，然后通过QTextDocument设置HTML代码，利用QPainter来进行文本的绘制，绘制区域通过整个文本区域经过坐标变换后得到的。

weixin_34023863
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
qt5 显示组控件 Display Widgets
zhenge4636的博客
04-23 783
可以使用setText()方法将HTML字符串设置到Text Browser中，并使用append()方法在现有文本的末尾添加新的HTML字符串。可以使用find()方法查找指定的文本，并使用highlighted()信号高亮显示匹配项。setSegmentStyle(QLCDNumber::SegmentStyle style)：设置LCD的数字样式，包括圆角、直角、填充等。setOrientation(Qt::Orientation orientation)：设置进度条的方向，可以是水平或垂直方向。
QLabel文字过长显示不全处理方法
奋斗Andy的博客
01-30 1万+
1 让其自动换行 ui->label->adjushSize(); //自适应大小 ui->label->setWordWrap(true); //自动换行 2 使用QFontMetrics::elidedText函数让文本显示省略号(省略号位置可以在文本开头/中间/末尾) 函数原型： QString QFontMetrics::elidedText(const QString &text, Qt::TextElideMode mode, int...
qt中qml控件TextEdit文本显示不全，部分显示空白
qq_22946897的博客
05-27 2931
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 项目背景：项目中，部分客户机器文字显示不全，显示空白，有点像添加了空格，只适用的是qml的TextEdit控件；开始怀疑是锚点和布局影响了，或者是宽高不够影响了，排查后发现都不是，每次修改只能打包发给客户测试，效率比较低，网上类似的资料少得可怜，令人头疼啊。后来发现是客户的机器比较旧，硬件版本太低，项目用的qt..
QT QTableView使用自定义数据模型
最新发布
sxy的博客
04-19 1784
在mainwindow.h文件中引用MyTableModel头文件，并声明MyTableModel对象。
UITextView 属性及使用详解
天微微亮
08-06 2419
//初始化并定义大小     UITextView *textview = [[UITextView alloc] initWithFrame:CGRectMake(20, 10, 280, 30)];     textview.backgroundColor=[UIColor whiteColor]; //背景色     textview.scrollEnabled = NO;
QTableView 标题换行显示和富文本显示 qt5.8
12-24
本文将深入探讨如何在`QTableView`中实现标题换行显示和富文本显示，以及使用`delegate`和`checkbox`代理来扩展其功能。 首先，让我们讨论如何实现`QTableView`标题的换行显示。在默认情况下，`QTableView`的列标题...
将xml内容显示Qt界面
04-16
在IT领域，XML...总的来说，这个项目涉及到XML解析、Qt界面设计、信号与槽机制以及可能的富文本处理。通过这样的实践，开发者可以提升在数据处理和GUI设计方面的技能，同时也能深入理解XML和Qt框架的集成应用。
QT.rar_GUI_QT
09-21
7. **QTextEdit**：用于富文本编辑。 8. **QMainWindow**：通常作为复杂应用的主要窗口，包含菜单栏、工具栏和状态栏。 9. **QFormLayout**：用于创建表单样式布局。 10. **QTableView, QListView, QTreeView**：...
QT帮助文档_中文版_QT中文版帮助文档_
09-29
对于更复杂的用户交互，有QLineEdit用于文本输入，QTableView用于显示表格数据，以及QTextEdit用于富文本编辑。 在文档中，你还可以了解到Qt的信号和槽机制，这是其事件驱动编程的关键部分。当一个对象的特定状态...
基于Qt的文件查看器
11-12
QTextBrowser更适合显示格式化的HTML或富文本，而QTextEdit则更适用于纯文本编辑。 6. **信号与槽机制**：这是Qt的核心机制，用于对象间的通信。当用户在文件查看器中选择一个文件时，可以触发一个信号，然后连接到...
qt点击按钮显示文本
奔跑的小仙女
08-19 1558
qt点击按钮显示文本
富文本处理（QTextEdit）
qq_45303986的博客
11-11 3672
富文本（Rich Text）或富文本格式，简单的讲就是在文档中可以使用多种格式，比如字体颜色、图片、表格等。Qt对富文本的处理分为编辑操作和只读操作。编辑操作使用基于光标的一些接口函数，更好的模拟用户操作，更加容易理解，且不会丢失底层的文档框架。对于文档概览，使用了只读的分层次的接口函数，有利于文档的检索和输出。QTextDocument 是结构化富文本文档的容器，为样式文本和各种类型的文档元素（如列表、表格、框架和图像）提供支持。它们可以创建用于QTextEdit，也可以独立使用。
【Python、Qt】使用QItemDelegate实现单元格的富文本显示+复选框功能
weixin_44733774的博客
10-15 618
主打一个陪伴。代码为Python，C++的就自己逐条语句慢慢改吧。
Qt实用技巧：使用QTableView、QSqlTableMode与QSqlDatabase对数据库数据进行操作
热门推荐
长沙创微智能科技官方博客
11-23 4万+
Qt实用技巧：使用QTableView、QSqlTableMode与QSqlDatabase对数据库数据进行操作 需求 编写应用软件的过程中，需要对保存的数据进行动态的设置，当程序运行的时查询数据库获取相关配置项进行设置。 原理 使用将QSqlTableModel与QSqlDatabase绑定即model与sql绑定，然后将model与QTabl
C++图形用户界面开发框架Qt 6.x - 在QML中显示文本
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
12-20 595
点击获取Qt下载 显示和格式化文本 要在QML中显示文本，请创建一个Text项并将text属性设置为您希望显示的文本，Text项现在将显示该文本。 可以在Text项目上设置几个属性来设置整个文本块的样式，这些包括颜色、字体系列、字体大小、粗体和斜体。 富文本（如标记）可用于使用Text项选择性地设置文本特定部分的样式，将 Text::textFormat 设置为 Text.StyledText来使用此功能。 布置文本 默认情况下，除非文本包含嵌入的换行符，否则会将文本显示为单行。要换行，请设置
Qt多线程处理文本文件并显示
ZONGXP的博客
01-10 5754
参考：http://blog.csdn.net/u010650281/article/details/51516776 qt本身提供了许多多线程的类，方便我们进行多线程的开发 创建线程，Qt 包含下面一些线程相关的类： QThread 提供了开始一个新线程的方法 QThreadStorage 提供逐线程数据存储 QMutex 提供相互排斥的锁，或互斥量 QMutexLocker 是一个
qt 富文本 html,Qt对Html富文本支持的控件以及QLabel两种打开超链接的方式
weixin_30843121的博客
06-11 1122
原创文章，欢迎转载。转载请注明：转载自 祥的博客原文链接：https://blog.csdn.net/humanking7/article/details/806858931.说明2.演示2.1. 代码2.2. 关于打开超链接的两种方式说明3.支持的标签 Tags4. 对CSS的支持1.说明Qt的文本窗体部件能够显示富文本，使用HTML4 标记。能够以这种方式显示富文本的窗体控件有： QTextD...
Qt5设计一个显示文本和显示图片的案例
qq_44176343的博客
03-30 2119
1、Qt代码：设计一个两个按钮“显示”，“清空”。当点击“显示”按钮时候显示文字，当点击“清空”按钮时候，清空文本框中内容。 2.qt设计两个按钮，当点击“显示”的时候，显示图片，当选择“清除”的时候就清空照片。 注意：这里要将图片添加到本地资源里面，首先将图片文件放在该项目的目录下，其次就是添加新资源，再添加现有资源，选中就ok啦。 ...
QT点击按钮显示文字-初学
m0_37917545的博客
07-19 5893
适用于QT新学者： .cpp: #include "QtGuiApplication1.h" QtGuiApplication1::QtGuiApplication1(QWidget *parent)     : QMainWindow(parent), ui(new Ui::QtGuiApplication1Class()) {     ui-&gt;setupUi(this); } ...
qtableview 单元格富文本
01-25
在QTableView中显示富文本的单元格，可以通过设置QStandardItemModel模型的setData()函数，并将富文本字符串作为数据项传递给它。 首先，我们需要创建一个QStandardItemModel模型对象，并设置它的行数和列数。然后，我们可以使用setItem()函数将每个单元格中的数据项设置为富文本。 接下来，我们可以使用toHtmlEscaped()函数将富文本字符串转换为Html转义字符，这样可以确保特殊字符正常显示。然后，将富文本字符串设置为数据项。 最后，将QStandardItemModel设置为QTableView的模型即可显示富文本。 下面是一个示例代码： ```cpp #include <QTableView> #include <QStandardItemModel> #include <QApplication> int main(int argc, char *argv[]) { QApplication a(argc, argv); // 创建模型 QStandardItemModel model(3, 3); // 设置富文本数据 QString richText = "<font color=\"red\">红色</font> <b>加粗</b>"; for(int row = 0; row < model.rowCount(); ++row) { for(int column = 0; column < model.columnCount(); ++column) { // 将富文本字符串转换为Html转义字符 QString html = richText.toHtmlEscaped(); // 设置数据项 QStandardItem* item = new QStandardItem(); item->setData(html, Qt::DisplayRole); // 设置单元格 model.setItem(row, column, item); } } // 创建视图 QTableView tableView; tableView.setModel(&model); tableView.show(); return a.exec(); } ``` 这样，QTableView中的每个单元格都将以富文本字符串的样式显示。请注意，如果你想在单元格中显示更复杂的富文本样式，可以使用更多的Html标签和属性来定制富文本字符串。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值