為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正常工作嗎?
答案是肯定的,只需要將文字範圍的計算邏輯做一些修改,因此各位讀者不防將其作為一個小練習:)。