QTreeView自绘实现酷炫样式

本篇文章结合笔者的经历，介绍一种通过重写QTreeView绘制事件，使用QPainter来实现好看的列表的方式。

导语

Hi，各位读者朋友，大家好。相信大家在日常的工作中，经常会接触到QTreeView这个控件吧！

QTreeView，顾名思义，就是一种树形的控件，在我们需要做类似于文件列表的视图时，是一个不错的选择。然而，仅通过设置样式表，往往无法完全满足我们的需求。迫不得已，我们只能选择自实现QTreeView的绘制事件，通过画笔，逐个绘制我们想要的效果。

关于QTreeView的样式表部分，Qt官方给出了一些示例：Customizing QTreeView ， 本文不作具体介绍，感兴趣的读者可以自行观看。

话不多说，咱们先上效果图：

接下来，咱们通过一下几个步骤，逐个分析，怎么达到上图的效果。

1. 整个控件的背景色
2. 单元格的效果
3. 单击和双击选择的效果

整个控件的背景色

话不多说，码来！

void MyTreeView::paintEvent(QPaintEvent* event)
{
    int count = m_pModel->rowCount(this->rootIndex());
    QPainter painter(this->viewport());

    painter.setPen(Qt::NoPen);
    painter.setBrush(QColor(40, 44, 52));
    painter.drawRect(this->viewport()->rect());

    // 列表为空时，绘制空状态
    if (count == 0) {
        QPoint startPos(this->width() / 2 - 72, this->height() / 2);

        QFont font("Microsoft YaHei UI");
        font.setPixelSize(12);
        painter.setFont(font);
        painter.setPen(QColor(153, 154, 161));
        painter.setBrush(Qt::NoBrush);
        painter.drawText(startPos.x(), startPos.y() + 64 + 8, 148, 32, Qt::AlignCenter | Qt::TextWordWrap, "文件夹为空");

        return;
    }

    QTreeView::paintEvent(event);
}

在paintEvent中，首先在整个QTreeView的区域，绘制了一个背景色。其次判断model中是否没有数据，如果没有数据，则居中绘制一个空状态。

单元格的效果

绘制单元格，我们通过drawRow去为每一个单元格绘制我们想要的效果。

void MyTreeView::drawRow(QPainter* painter, const QStyleOptionViewItem& options, const QModelIndex& index) const
{
    if (!index.isValid())
        return;

    painter->save();
    painter->setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing | QPainter::SmoothPixmapTransform);
    QString path = m_pModel->filePath(index);
    QFileInfo file(path);
    QRect rect = options.rect;

    painter->setPen(Qt::NoPen);

    //判断状态
    bool bNormal = false, bDClick = false, bClick = false;

    if (path == m_selectPath)
    {
        bDClick = true;
    } else if (index == currentIndex()) {
        bClick = true;
    } else {
        bNormal = true;
    }

    // 计算当前Index的目录相对root目录的层级
    int rootPathSize = m_pModel->rootPath().size();
    int indexPathSize = m_pModel->filePath(index).size();
    QString relativePath = m_pModel->filePath(index).mid(rootPathSize, indexPathSize - rootPathSize);
    int indexTier = relativePath.split('/').size() - 1;
    // 当前index的缩进
    int indexIndentation = (indexTier - 1) * TierIndentation + 26;

    //QString theme = theme_manager::Instance()->GetThemeName();

#pragma region 绘制底色
    if (bNormal)
    {
        QBrush brush = QBrush(QColor(40, 44, 52));
        painter->setBrush(brush);
        painter->drawRect(rect);
    }
#pragma endregion

#pragma region 绘制选中样式

    if (!file.isDir() && bDClick)
    {
        QBrush brush = QBrush(QColor(50, 56, 66));
        painter->setBrush(brush);
        painter->drawRect(rect);
    }

#pragma endregion

#pragma region 绘制单击样式
    if (bClick)
    {
        QBrush brush = QBrush(QColor(44, 49, 58));
        painter->setBrush(brush);
        painter->drawRect(rect);
    }
#pragma endregion

#pragma region 绘制图标
    // 画图标
    int iconWidth = file.isDir() ? FOLDER_WIDTH : ARROW_WIDTH;
    int iconHeight = file.isDir() ? FOLDER_HEIGHT : ARROW_HEIGHT;

    // (iconWidth - ARROW_HEIGHT)是绘制普通文件时，应该多往右边移动一点
    int xIcon = rect.x() + indexIndentation - (iconWidth - FOLDER_WIDTH);
    int yIcon = rect.y() + (SectionHeight - iconHeight) / 2;
    QRect iconRec(QPoint(xIcon, yIcon), QSize(iconWidth, iconHeight));

    if (file.isDir())
    {
        // 绘制文件夹展开与收起样式
        isExpanded(index) ? painter->drawImage(iconRec, m_ImageTreeFolderExpand)
            : painter->drawImage(iconRec, m_ImageTreeFolder);
    }
    else
    {
        QRect iconRec(QPoint(xIcon, yIcon), QSize(14, 14));
        painter->drawImage(iconRec, m_ImageCppFile);
    }
#pragma endregion

#pragma region 绘制文字
    QString text = index.data(Qt::DisplayRole).toString();
    // x坐标为当前层次缩进+图标宽度(20)+文字与图标间距(5)
    QRect leverRect(QPoint(rect.x() + indexIndentation + FOLDER_WIDTH + 4, rect.y()),
                    QSize(rect.width(), rect.height()));

    // 绘制文字
    QColor themeTextColor(204, 204, 204);

    painter->setFont(m_textFont);
    painter->setBrush(Qt::NoBrush);
    painter->setPen(QPen(themeTextColor));

    QFontMetrics fm(m_textFont);
    text = fm.elidedText(text, Qt::ElideRight, m_width);

    QRect boundingRect;
    painter->drawText(leverRect, Qt::AlignLeft | Qt::AlignVCenter, text, &boundingRect);
#pragma endregion

#pragma region 绘制箭头
    //绘制箭头
    bool bExpand = this->isExpanded(index);
    int xArrow = rect.x() + MARGIN_WIDTH;
    int yArrow = rect.topLeft().y() + (SectionHeight - 8) / 2;
    QRect border(xArrow, yArrow, 8, 8);
    bool bDir = file.isDir(), bEmpty = true;
    if (bDir)
    {
        QDir dir(path);
        bEmpty = dir.isEmpty();
    }

    if (bDir && !bExpand && !bEmpty)
    {
        painter->drawImage(border, m_ImageExpand);
    } else if (bDir && bExpand && !bEmpty)
    {
        painter->drawImage(border, m_ImageClose);
    }
#pragma endregion

    painter->restore();
}

️绘制的顺序，需要根据各个部分实际所在的图层顺序去绘制，比如说先要绘制底色，再去绘制上面的内容。

单击选择和双击选择

这一个部分，我们通过重载 mouseDoubleClickEvent 和 mousePressEvent 来监控鼠标的事件。

void MyTreeView::mousePressEvent(QMouseEvent* event)
{
    QTreeView::mousePressEvent(event);

    QModelIndex index = indexAt(event->pos());
    if (!index.isValid())
        return;

    //是否为文件夹
    const auto& path = m_pModel->filePath(index);
    QFileInfo info(path);
    if (!info.isDir())
        return;

    //是否在箭头区域
    QPoint point = event->pos();
    int  width = this->viewport()->width();
    QRect rect(width - MARGIN_WIDTH - ARROW_WIDTH, SectionHeight - MARGIN_HEIGHT - ARROW_HEIGHT, ARROW_WIDTH, ARROW_HEIGHT);
    bool bContain = rect.contains(QPoint(event->pos().x(), event->pos().y() % SectionHeight));
    if (!bContain)
        return;

    // 如果目录为空，不触发箭头交互效果
    QDir tmpDir(path);
    if (tmpDir.isEmpty())
        return;

    //展开收缩节点
    this->isExpanded(index) ? this->collapse(index)
        : this->expand(index);

}

void MyTreeView::mouseDoubleClickEvent(QMouseEvent* event)
{
    QModelIndex index = this->indexAt(event->pos());
    if (index != this->currentIndex())
        return;

    // 处理普通文件
    QString path = m_pModel->filePath(index);
    if (!m_pModel->isDir(index)) {
        m_selectPath = path;

    }

    update();
    QTreeView::mouseDoubleClickEvent(event);
}

通过上面的几个函数，我们就可以实现自定义绘制QTreeView的需求，如果还需要绘制更多的东西，则只要自己往上面添加绘制的区域即可。

一些碎碎念

本来觉得绘制一个QTreeView比较麻烦，包括在这篇博客的时候仍然是这种感觉，但是通过输出这篇博客，发现其实也很简单（当然，不考虑绘制效率的情况下）。就像我刚开始接触Qt时，总觉得自绘是一件很麻烦、很困难的事，想着全部都要自己去画。

等到后面真正接触到的时候，更慌了。但没办法，任务来了，怎么办？硬着头皮上呗，一顿捯饬之后，我发现，其实也没那么难。

所以说，刚接触Qt的同学，如果样式表达不到自己需求，就勇敢的去尝试自绘吧！‍️

创作不易，如果对您有帮助，点赞、关注、收藏支持一下！不甚感激！