如何为Qt视图中的文字实现彩虹渐变效果

2020-01-06 20:16:36丽君

我们想要实现渐变效果是不能只返回单一的一种颜色的,需要用到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()};
}