将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正常工作嗎？
答案是肯定的，隻需要将文本範圍的計算邏輯做一些修改，是以各位讀者不防将其作為一個小練習：）。