Qt之QTableView显示富文本

简介: 简述对于QTableView中的显示,我们前面介绍过很多种,其中包括:文本、进度条、复选框等,今天我们介绍一下关于富文本的显示。可能绝大多数小伙伴会通过QAbstractTableModel中的data来实现,可是现实告诉我们,那是行不通的,那么我们如何去显示呢?请看正文。简述效果源码分析效果源码下面我们使用QAbstrac

简述

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

目录
相关文章
|
6月前
|
数据库 开发者 Windows
QT 项目视图(QListView&QTreeView&QTableView)和项目部件(QListWidget&QTreeWidget&QTableWidget)详解-2
QT 项目视图(QListView&QTreeView&QTableView)和项目部件(QListWidget&QTreeWidget&QTableWidget)详解
|
6月前
|
XML 设计模式 JSON
QT 项目视图(QListView&QTreeView&QTableView)和项目部件(QListWidget&QTreeWidget&QTableWidget)详解-1
QT 项目视图(QListView&QTreeView&QTableView)和项目部件(QListWidget&QTreeWidget&QTableWidget)详解
|
C语言
QT QtableView操作详解
本文实现了使用QtableView控件来显示数据,数据源使用txt文本作为数据源,使用了QStandardItemModel作为数据模型来实现了对TableView空间的初始化,和对txt数据源的增删改查功能。
559 0
QT QtableView操作详解
《QT从基础到进阶·十》QTableView,QTableWidget,QLineEdit设置只读和输入限制
《QT从基础到进阶·十》QTableView,QTableWidget,QLineEdit设置只读和输入限制
321 0
《QT从基础到进阶·七》QTableView的使用
《QT从基础到进阶·七》QTableView的使用
238 0
|
SQL 数据库 计算机视觉
Qt实用技巧:使用QTableView、QSqlTableMode与QSqlDatabase对数据库数据进行操作
Qt实用技巧:使用QTableView、QSqlTableMode与QSqlDatabase对数据库数据进行操作
Qt实用技巧:使用QTableView、QSqlTableMode与QSqlDatabase对数据库数据进行操作
|
存储 程序员 C#
Python Qt GUI设计:QTableView、QListView、QListWidet、QTableWidget、QTreeWidget和QTreeWidgetltem表格和树类(提升篇—1)
Python Qt GUI设计:QTableView、QListView、QListWidet、QTableWidget、QTreeWidget和QTreeWidgetltem表格和树类(提升篇—1)
Python Qt GUI设计:QTableView、QListView、QListWidet、QTableWidget、QTreeWidget和QTreeWidgetltem表格和树类(提升篇—1)
转载:QT QTableView用法小结
出自:   http://blog.chinaunix.net/uid-20382483-id-3518513.html   QTableView常用于实现数据的表格显示。下面我们如何按步骤实现学生信息表格: 一 添加表头     //准备数据模型     QStandardIte...
1235 0

推荐镜像

更多