如何为Qt视图中的文字实现彩虹渐变效果
前言
将view中的文本内容用自定义的颜色显示是一种十分常见的需求。今天我们稍微改变些“花样”。下面话不多说了,来一起看看详细的介绍吧
需求定义
我们的需求很简单,现在有一些在view中的text内容需要使用彩色显示,而且不使用单一的一种颜色,而是多种颜色渐变实现的彩虹效果。
文字描述可能比较抽象,所以我们先给出预想的效果图:
现在让我们想办法实现图中的效果。
需求分析
好在Qt的Model/View机制对于用户自定义的外观控制提供了极为丰富的支持,因此我们可以轻松地实现许多独特的显示效果。
通常情况下,对于像按特定颜色显示内容的需求只需要在model的data接口中根据调用时的Qt::ItemDataRole返回对应的数据即可,比如控制文本颜色时我们只需要对Qt::ForegroundRole返回指定的QBrush对象就可以。
但是仔细思考之后你就会发现这种办法并不能解决我们的需求。
我们想要实现渐变效果是不能只返回单一的一种颜色的,需要用到QLinearGradient,并且需要指定线性填充的坐标及大小。而我们光从Qt::ItemDataRole是拿不到文字的显示范围的,因此我们就不能指定渐变填充的范围了。
不过正如本节开头所说,Qt提供了足够多的途径让你控制元素的外观。所以我们很快就把目光投向了delegate,一种经常用来控制model中数据显示的工具。
虽然delegate更多的是充当了显示非文本数据以及控制显示格式的责任,但是只要实现了它的paint方法。我们一样可以绘制想要的效果。特别的,paint方法还会将待绘制区域的信息从参数中传入,因此我们有充足的条件使用QLinearGradient实现文字的渐变效果了。
现在已经清楚实现我们的需求的思路了,接下来我们看看如何用代码实现它。
代码实现
我们只需要继承QStyledItemDelegate并重写它的paint和sizeHint方法:
class ColorDelegate : public QStyledItemDelegate { public: void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const override; QSize sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const override; };
其中paint用来绘制我们的显示效果,而sizeHint则返回item的大小。
对于sizeHint没有什么特别的操作,单纯计算文字的长度和高度,然后基于这连个值指定item的大小:
QSize ColorDelegate::sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const { auto text = index.data().toString(); auto width = option.fontMetrics.width(text) + 20; return QSize{width, option.fontMetrics.height()}; }
下面就要进入重点了:
void ColorDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const { auto text = index.data().toString(); auto myOpt = option; myOpt.displayAlignment = Qt::AlignCenter; auto sWidth = myOpt.fontMetrics.width(text); auto sHeight = myOpt.fontMetrics.height(); // 计算文字所在的范围,因为是居中对齐,所以需要计算相应的起始位置 auto sRect = QRectF(myOpt.rect.x() + (myOpt.rect.width() - sWidth) / 2.0, myOpt.rect.y() + ((myOpt.rect.height() - sHeight) / 2.0), sWidth, sHeight); // 将渐变填充的范围设置成文字所在的范围 QLinearGradient l(sRect.x(), sRect.y(), sRect.x() + sRect.width(), sRect.y() + sRect.height()); // 设置彩虹色渐变效果,彩虹由赤橙黄绿青蓝紫的颜色组成 // 因此我们除去起始点为红色,每隔1/6就设置一种颜色 l.setColorAt(0, Qt::red); l.setColorAt(1.0 / 6, QColor(255, 97, 0)); l.setColorAt(2.0 / 6, QColor(255, 255, 0)); l.setColorAt(3.0 / 6, Qt::green); l.setColorAt(4.0 / 6, Qt::cyan); l.setColorAt(5.0 / 6, Qt::blue); l.setColorAt(1, QColor(255, 0, 255)); // 这里并不使用painter,只需要QStyle即可实现效果 // QPalette::Text为文本显示效果的role auto role = QPalette::Text; if (option.state & QStyle::State_Selected) { // 当前item被选中时绘制高亮的选中框 role = QPalette::HighlightedText; painter->fillRect(option.rect, option.palette.highlight()); } myOpt.palette.setBrush(role, QBrush(l)); // 注意最后一个参数role,只有设置了它才能让QStyle正确地绘制自定义的文本显示效果 QApplication::style()->drawItemText(painter, myOpt.rect, myOpt.displayAlignment, myOpt.palette, true, text, role); }
需要注意的都已经在注释中说明,可以看到paint的逻辑实际上并不复杂,只需要正确计算文字的显示范围后调用相应的绘制接口即可。
可能你会有些疑惑,为什么要计算文本的范围?答案是因为如果将整个item作为填充范围的话,那么文本之外的空白部分也会被计算进去,因此文本的显示效果会被view的拉伸的缩小所影响,显然不是我们希望的结果,因此只填充文本所在的范围就很有必要了。
至于delegate的其他功能,我们选择继续使用父类的默认实现,因为我们只是使用delegate控制显示效果的功能,并不需要实现和数据的交互。
下面我们测试下自定义的ColorDelegate:
#include <QApplication> #include <QStandardItemModel> #include <QListView> #include <QVBoxLayout> #include "ColorDelegate.h" int main(int argc, char **argv) { QApplication app(argc, argv); auto win = new QWidget{}; auto model = new QStandardItemModel{win}; model->appendRow(new QStandardItem{"C++"}); model->appendRow(new QStandardItem{"GoLang"}); model->appendRow(new QStandardItem{"JavaScript"}); model->appendRow(new QStandardItem{"Object C"}); model->appendRow(new QStandardItem{"Rust"}); model->appendRow(new QStandardItem{"这是一串非常非常长的被作为测试用例的样本字符串。"}); model->appendRow(new QStandardItem{"██████████████████"}); auto view = new QListView{}; view->setModel(model); view->setItemDelegate(new ColorDelegate{}); // 设置自定义delegate auto layout = new QVBoxLayout{}; layout->addWidget(view); win->setLayout(layout); win->show(); app.exec(); }
运行之后你就会看到如下图的界面:
虽然文字较短时某些位于边缘的颜色有些难以辨认,但整体的彩虹色渐变效果是很明显的。这样我们就实现了文字的彩虹渐变效果。
思考题
最后我们留下一点思考。
虽然我们实现了需求,但是我们的delegate只能处理文字居中的情况,那么其他对齐的情况下呢?
或者如果我们已经在model设置了对齐方式,在delegate中不想改变它,这时候有办法让我们的delegate正常工作吗?
答案是肯定的,只需要将文本范围的计算逻辑做一些修改,因此各位读者不防将其作为一个小练习:)。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对猪先飞的支持。
相关文章
iOS设置UIButton文字显示位置和字体大小、颜色的方法
这篇文章给大家分享了iOS如何设置UIButton的文字显示位置和字体的大小、颜色,文中给出了示例代码,相信对大家的学习和理解很有帮助,有需要的朋友们下面来一起看看吧。...2020-06-30- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了C#文字换行的实现方法,通过自定义函数实现针对特定字符串的换行长度处理,是比较实用的技巧,对于C#的深入学习具有一定的借鉴价值,需要的朋友可以参考下...2020-06-25
- 下面小编就为大家分享一篇Qt 使用Poppler实现pdf阅读器的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-25
- 本文主要介绍AngularJS 视图,这里整理了相关知识,并附代码示例和实现效果图,有兴趣的小伙伴可以参考下...2016-08-27
- 这篇文章主要介绍了将matplotlib绘图嵌入pyqt的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-04-27
- 这篇文章主要给大家介绍了关于C#利用GDI+给图片添加文字(文字自适应矩形区域)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2020-06-25
- 在前一篇中我们介绍了键盘和鼠标事件,其实还有一个非常常用的事件,就是定时器事件,如果要对程序实现时间上的控制,那么就要使用到定时器。而随机数也是很常用的一个功能,在我们要想产生一个随机的结果时就要使用到随机数。本文我们就来简单介绍一下定时器和随机数。...2020-04-25
- 这篇文章主要为大家详细介绍了iOS实现圆角箭头视图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-16
- 这篇文章主要介绍了在vue项目或网页上实现文字转换成语音,需要的朋友可以参考下...2020-06-09
- 这篇文章主要给大家介绍了关于教你3分钟如何发布Qt程序的相关资料,文中通过实例代码结束的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-08-24
- PS怎么把文字变成选区?本次小编为大家带来了详细的操作方法,想要知道该技能的同学快来看看吧。 1、在PS中,选择“横排文字工具”, 2、然后在文档中输入字体...2016-12-15
- 这篇文章主要为大家详细介绍了Qt实现闹钟小程序,利用Qt的designer设计需要的闹钟界面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-04-25
- 本文主要介绍了Qt使用windeployqt工具实现程序打包发布方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-11-01
- 这篇文章主要介绍了PostgreSQL 更新视图脚本的注意事项说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-26
- 信号和槽是Qt特有的信息传输机制,本文主要介绍了浅谈Qt信号与槽的各种连接方式,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-02
- 这篇文章主要介绍了PyQt QMainWindow的使用示例,帮助大家更好的理解和学习使用pyqt,感兴趣的朋友可以了解下...2021-03-20
- 这篇文章主要给大家介绍了关于ASP.NET MVC中分部视图的应用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22
- 本文主要介绍了Qt实现UDP多线程数据处理及发送的简单实例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-21
- 这篇文章主要为大家详细介绍了Qt自定义控件实现线条型加载条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-04-25