简述

对于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来进行文本的绘制，绘制区域通过整个文本区域经过坐标变换后得到的。

Qt之QTableView显示富文本的更多相关文章

  1. Qt之QTableView显示富文本（使用了QAbstractTextDocumentLayout和QTextDocument）

    http://blog.csdn.net/liang19890820/article/details/50973099

  2. 使用UIWebView中html标签显示富文本

    使用UIWebView中html标签显示富文本 用UIWebView来渲染文本并期望达到富文本的效果开销很大哦! Work 本人此处直接加载自定义字体"新蒂小丸子体",源码不公开, ...

  3. QTableView使用HTML显示富文本

    对于QTableView中的显示,我们前面介绍过很多种,其中包括:文本.进度条.复选框等,今天我们介绍一下关于富文本的显示. 可能绝大多数小伙伴会通过QAbstractTableModel中的data ...

  4. iOS swift 富文本显示 富文本在iOS中使用场景和解决方案

    项目中很多地方都会用到富文本的内容:比如一般的商品详情,视频详情,资讯详情等,运营人员通过后台的富文本编辑器编辑的内容,前端拿到的就是一段富文本的字符串,这富文本大多都是图片和文字的组合.我们今天介绍 ...

  5. vim less vi 不显示富文本 ESC

    如图: 使用 less -r xxx.log 即可显示如下

  6. uniapp vue v-html，显示富文本，内容img图片超出解决办法

    uniapp h5中,v-html,img图片中style=width:auto;会显示图片原来的尺寸,会超出屏幕,替换成width:100%,这样就不会超出屏幕 重要的地方,例如<img sr ...

  7. vue显示富文本

    来源:https://segmentfault.com/q/1010000013952512 用  v-html 属性解决

  8. Django 中文乱码问题&富文本显示

    1.起源:从后台管理添加中文对象,正常,但是再次点击编辑的时候,抛出异常,显示编码问题. 解决:在项目的manage.py 的文件头部添加  import sys  reload(sys)  sys. ...

  9. 第三百九十五节，Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框

    第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框 首先安装DjangoUeditor3模块 Ueditor HTML编辑器是百度开源的HTML编辑器 下载 ...

随机推荐

  1. 全栈式JavaScript

    如今,在创建一个Web应用的过程中,你需要做出许多架构方面的决策.当然,你会希望做的每一个决定都是正确的:你想要使用能够快速开发的技术,支持持续的迭代,最高的工作效率,迅速,健壮性强.你想要精益求精并 ...

  2. javascript document.write

    在载人页面后,浏览器输出流自动关闭:在此之后,任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流.它将清除当前页面内容(包括源文档的任何变量或值).document. ...

  3. JSP 页面打印

    <HTML><HEAD><TITLE>javascript打印-打印页面设置-打印预览代码</TITLE> <META http-equiv=Co ...

  4. Hungary（匈牙利算法）——二分图最大匹配

    在复习匈牙利算法的时候,发现这么一篇介绍匈牙利算法的文章,非常通俗易懂,所以就借鉴过来了. 复杂度:邻接矩阵:O(v^3)邻接表:O(V*E) 附上链接:趣写算法系列之--匈牙利算法 下面就附上代码吧 ...

  5. CAS登录后回传除了ticket参数以外的其他自定义参数

    在一次项目的技术选型中,选择了easyui+cas+shiro+spring的组合,cas实现了单点登录,这使得在一个应用中嵌入另一个应用的页面来展示数据所涉及到的授权方面变得简单. 由于shiro在 ...

  6. Debian - 设置MYSQL开机启动

    设置MYSQL 首先拷贝mysql.server到/etc/init.d目录下命名为mysql # cp /自己的安装目录/mysql/share/mysql/mysql.server /etc/in ...

  7. http://www.cnblogs.com/yjmyzz/p/dubbox-demo.html

    http://www.cnblogs.com/yjmyzz/p/dubbox-demo.html

  8. [RM HA 2] Hadoop 2.0 ResourceManager HA原理

    继上篇文章验证Cloudera RM HA功能后,现在开始分析Cloudera RM HA的原理. 设计目标 主要目的是为了解决两种问题 计划外的机器挂掉 计划内的如软件和硬件升级等. 架构 流程:两 ...

  9. 瞬态电压抑制二极管(TVS)选用原则

    在选用瞬态电压抑制二极管(TVS)时,必须考虑电路的具体条件,一般应遵循以下原则: 一.大箝位电压Vc(MAX)不大于电路的最大允许安全电压. 二.最大反向工作电压(变位电压)VRWM不低于电路的最大 ...

  10. Jenkins Master/Slave架构

    原文:http://www.cnblogs.com/itech/archive/2011/11/11/2245849.html 一 Jenkins Master/Slave架构 Master/Slav ...