爲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正常工做嗎？

答案是確定的，只須要將文本範圍的計算邏輯作一些修改，所以各位讀者不防將其做爲一個小練習：）。