简述

对于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. UICollectionViewLayout

    http://blog.csdn.net/majiakun1/article/details/17204921

  2. cts 测试环境安装 ubuntu

    1 下载cts测试包 和 sdk 包 http://source.android.com/compatibility/downloads.html  ----cts 包 http://develope ...

  3. centos mysql 操作

    安装mysqlyum -y install mysql-server 修改mysql配置 vi /etc/my.cnf 这里会有很多需要注意的配置项,后面会有专门的笔记 暂时修改一下编码(添加在密码下 ...

  4. 山寨小小军团开发笔记 之 GamePool

    很多时候我们对于物体(比如弓箭)大量的生成与销毁,这个时候可以把弓箭放在内存池中进行管理,加快体验.自己Copy了一个简易版的. 一.代码 GameObjectPoolManager.cs using ...

  5. 用wget实现cookie欺骗

    用wget实现cookie欺骗 . 分析登录界面的html代码 页面在 http://bbs.linuxeden.com/ <form. id="loginform" met ...

  6. HDU4512完美队形I && HDU1423 Greatest Common Increasing Subsequence (LCIS)

    填坑的时候又到啦,校赛因为不会LCIS所以吃了大亏,这里要补起来.LCIS就是在两个串里找最长上升子序列,相关的博客有很多,这里自己就不写那么多了. http://www.cnblogs.com/ja ...

  7. Android开发者应该深入学习的10个开源应用项目

    Android 开发带来新一轮热潮让很多移动开发者都投入到这个浪潮中去了,创造了许许多多相当优秀的应用.其中也有许许多多的开发者提供了应用开源项目,贡献出他们的 智慧和创造力.学习开源代码是掌握技术的 ...

  8. hdu 4259 Double Dealing

    思路: 找每一个数的循环节,注意优化!! 每次找一个数的循环节时,记录其路径,下次对应的数就不用再找了…… 代码如下: #include<iostream> #include<cst ...

  9. jenkins忘记管理员账号密码的补救方法-转

    源引自:http://www.cnblogs.com/xiami303/p/3625829.html 一不小心,忘记了admin用户的账号密码.然后就看不到manage jenkins的那部分内容了, ...

  10. 二分图点染色 BestCoder 1st Anniversary($) 1004 Bipartite Graph

    题目传送门 /* 二分图点染色:这题就是将点分成两个集合就可以了,点染色用dfs做, 剩下的点放到点少的集合里去 官方解答:首先二分图可以分成两类点X和Y, 完全二分图的边数就是|X|*|Y|.我们的 ...