QTableView使用HTML显示富文本
对于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来进行文本的绘制,绘制区域通过整个文本区域经过坐标变换后得到的。
http://blog.csdn.net/liang19890820/article/details/50973099
QTableView使用HTML显示富文本的更多相关文章
- 使用UIWebView中html标签显示富文本
使用UIWebView中html标签显示富文本 用UIWebView来渲染文本并期望达到富文本的效果开销很大哦! Work 本人此处直接加载自定义字体"新蒂小丸子体",源码不公开, ...
- Qt之QTableView显示富文本
简述 对于QTableView中的显示,我们前面介绍过很多种,其中包括:文本.进度条.复选框等,今天我们介绍一下关于富文本的显示. 可能绝大多数小伙伴会通过QAbstractTableModel中的d ...
- iOS swift 富文本显示 富文本在iOS中使用场景和解决方案
项目中很多地方都会用到富文本的内容:比如一般的商品详情,视频详情,资讯详情等,运营人员通过后台的富文本编辑器编辑的内容,前端拿到的就是一段富文本的字符串,这富文本大多都是图片和文字的组合.我们今天介绍 ...
- Qt之QTableView显示富文本(使用了QAbstractTextDocumentLayout和QTextDocument)
http://blog.csdn.net/liang19890820/article/details/50973099
- vim less vi 不显示富文本 ESC
如图: 使用 less -r xxx.log 即可显示如下
- uniapp vue v-html,显示富文本,内容img图片超出解决办法
uniapp h5中,v-html,img图片中style=width:auto;会显示图片原来的尺寸,会超出屏幕,替换成width:100%,这样就不会超出屏幕 重要的地方,例如<img sr ...
- vue显示富文本
来源:https://segmentfault.com/q/1010000013952512 用 v-html 属性解决
- Django 中文乱码问题&富文本显示
1.起源:从后台管理添加中文对象,正常,但是再次点击编辑的时候,抛出异常,显示编码问题. 解决:在项目的manage.py 的文件头部添加 import sys reload(sys) sys. ...
- 第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框
第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框 首先安装DjangoUeditor3模块 Ueditor HTML编辑器是百度开源的HTML编辑器 下载 ...
随机推荐
- Eclipse配置JDK的源代码的src.zip
Eclipse配置JDK的源代码的src.zip包很简单.只需要简单的几个步骤. 1.点 “window”-> “Preferences” -> “Java” -> “Install ...
- 解决SQL server不支持utf8,php却用utf8的矛盾问题
function convert2utf8($string) { return iconv("gbk","utf-8",$string); } function ...
- 数据结构之顺序表,c#实现
using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...
- Axure 原型设计工具画业务流程图
加入人人都是产品经理[起点学院]产品经理实战训练营,BAT产品总监手把手带你学产品点此查看详情! 软件行业从业6年,流程图看过太多,大部分流程图是在考验阅读者的理解能力,近期在设计公司新版APP,对流 ...
- Php基本语法数据类型操作基础训练
<?php /* * Created on 2015年12月17日 * * To change the template for this generated file go to * Wind ...
- 3Sum Closest 解答
Question Given an array S of n integers, find three integers in S such that the sum is closest to a ...
- 【HDU1272】小希的迷宫(并查集基础题)
仍旧裸敲并查集.有这两点注意: 1.输入 0 0 时候要输出YES 2.留心数组的初始化 #include <iostream> #include <cstring> #inc ...
- android 缓存Bitmap - 开发文档翻译
由于本人英文能力实在有限,不足之初敬请谅解 本博客只要没有注明“转”,那么均为原创,转贴请注明本博客链接链接 Loading a single bitmap into your user interf ...
- VPN拨号后使用本地网络上网
网络环境大概是这样了:我在家里用ADSL上网,通过VPN连接到公司的服务器.但是连接VPN后,只能登录到公司的服务器,与INTERNET就断开了,QQ.网页都断开了.公司的服务器应该是连网的,可能被限 ...
- JQuery 补充
筛选: expr String 字符串值,包含供匹配当前元素集合的选择器表达式. jQuery objectobject 现有的jQuery对象,以匹配当前的元素. elem ...