QTreeView使用總結14,自定義model,控制對齊和顏色

逆風微光發表於2018-05-29

1,簡介

前文介紹了使用自定義model的基本方法,重點強調了該方法帶來的效能上的優點。
其實自定義model還能更方便地對內容進行一些屬性控制,比如前景色、背景色、對齊、文字內容、字型等等。
主要就是在data函式內對各種role進行處理。具體哪些種類可以參考ItemDataRole型別。
下面示例對文字對齊和內容顏色的控制。

2,效果

控制對齊:指定首列左對齊,作為tree層級關係列,顯示效果好點。
中間分數列,即第2~6列右對齊,因為都是數字,右對齊容易觀看和比對大小。
後面評價列,居中對齊即可。

控制顏色:將所有的不合格標為紅色,醒目。

原圖效果:
原圖效果

進行對齊和顏色處理後的效果:
進行對齊和顏色處理後的效果

3,原理

在上文的基礎上,對data函式進行增加處理,
分別處理Qt::TextAlignmentRole、Qt::TextColorRole兩種型別屬性:

QVariant TreeModel::data(const QModelIndex &index, int role) const
{
    if (!index.isValid())
        return QVariant();

    TreeItem *item = static_cast<TreeItem*>(index.internalPointer());
    if (role == Qt::DisplayRole)
    {
        return item->data(index.column());
    }
    else if( role == Qt::TextAlignmentRole )
    {
        if( index.column() == 0 )
        {
            //第1列左對齊
            return QVariant(Qt::AlignVCenter | Qt::AlignLeft);
        }
        else if( index.column() > 0 && index.column() < 6 )
        {
            //第2~6列右對齊
            return QVariant(Qt::AlignVCenter | Qt::AlignRight);
        }
        else
        {
            //其他列居中對齊
            return QVariant(Qt::AlignCenter);
        }
    }
    else if(role == Qt::TextColorRole)
    {
        if(index.column() == 6)
        {
            QString str = item->data(6).toString();
            if(str == QStringLiteral("不合格"))
            {
                //第7列(是否合格)如果不合格就設文字為紅色
                return QVariant(QColor("#FF0000"));
            }
        }
        return QVariant();
    }
    return QVariant();
}

4,原始碼

本文示例原始碼下載:
TreeDemo14 自定義model,控制對齊和顏色

相關文章