Qt 自带树形表满足不了？教你自定义树形图

Qt 自定义树形图

很多时候Qt自带的控件已经满足不了我们的需求，这个时候就应该自定义控件，本篇文章就来介绍下自定义树形表。
其实严格意义上来说这个不是真正的自定控件，而是使用mvc模式进行视图重绘。

MVC全称是 Model View Controller，是一种非常非常流行的架构模式，相知识网上一抓一大把，这里就不再阐述。

实际上Qt中没有MVC模式，Qt中的MVC并不叫MVC，而是叫“MVD”，Qt中没有Controller的说法，而是使用了另外一种抽象: Delegate (委托) ，其行为和传统的MVC是相同的。写过C#的同学肯定对delegate就不陌生了，这里delegate的用法就是负责协调Model和View之间的数据。

其思想如下图所示：

简单的介绍下Qt的MVC，因为重绘树形图使用的就是Qt的MVD，QStandardItemModel（M）、treeView(V)、QStyledItemDelegate（D），接下来废话少说，上代码，注释解释。

class QTreeWidgetEx : public QTreeView
{
    Q_OBJECT
public:
    explicit QTreeWidgetEx(QWidget *parent = nullptr);
    int addRow(int parentNode,QString text,QVariant v = QVariant());
    QStandardItem* addParentNode(QString text,QString key);//添加父节点
    QStandardItem* addChilderNode(QStandardItem *parentNode,QString name,int decimal,QString unit,QString key);//添加子节点
public slots:
private:
    QStandardItemModel *mode = nullptr;
};

TreeWidgetEx::QTreeWidgetEx::QTreeWidgetEx(QWidget *parent) : QTreeView(parent)
{
//创建mode
    mode = new QStandardItemModel();
    //设置mode到视图
    this->setModel(mode);

//创建代理
    ItemDelegate *itemDelegate = new ItemDelegate(this);
//设置代理
    this->setItemDelegate(itemDelegate);
//视图禁止编辑
    this->setEditTriggers(QAbstractItemView::NoEditTriggers);
//禁止显示三角标
    this->setRootIsDecorated(false);
//子节点缩进
    this->setIndentation(0);
//隐藏滚动条
    this->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
//禁止双击展开
//    this->setExpandsOnDoubleClick(false);
}
//添加一行
int TreeWidgetEx::QTreeWidgetEx::addRow(int parentNode, QString text,QVariant v)
{
    QStandardItem *item = new QStandardItem(text);
  //设置节点高度
    item->setSizeHint(QSize(0,80));
    int index = -1;
    if(parentNode < 0)
    {
        mode->appendRow(item);
        index = mode->rowCount()-1;
    }
    else
    {
        mode->item(parentNode,0)->appendRow(item);
        index = mode->item(parentNode,0)->rowCount()-1;
    }

    return index;
}

//添加父节点
QStandardItem* TreeWidgetEx::QTreeWidgetEx::addParentNode(QString text, QString key)
{
    QStandardItem *item = new QStandardItem(text);
    item->setData(key);
    //设置节点高度
    item->setSizeHint(QSize(0,80));
    mode->appendRow(item);
    parentNodeMap.insert(key,item);
    return item;

}
//添加子节点
QStandardItem* TreeWidgetEx::QTreeWidgetEx::addChilderNode(QStandardItem *parentNode, QString name, int decimal, QString unit, QString key)
{
    QStandardItem *item = new QStandardItem(name);
    item->setData(key);
    //设置节点高度
    item->setSizeHint(QSize(0,80));
    parentNode->appendRow(item);
    return item;
}
//代理类，真正的自定义在这，重绘treeView
class ItemDelegate : public QStyledItemDelegate
{
    Q_OBJECT
public:
    explicit ItemDelegate(QWidget *parent = nullptr);
~ItemDelegate();
//重绘事件
void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const;
//点击事件
bool editorEvent(QEvent* event, QAbstractItemModel* model, const QStyleOptionViewItem& option, const QModelIndex& index);
signals:
//按钮点击信号
    void pushButtonClick(const QModelIndex &index);
private:
    QPoint m_mousePoint;  // 鼠标位置
    QScopedPointer<QPushButton> m_PushButton;//按钮
    QStringList m_list;
    int m_nSpacing;  // 按钮之间的间距
    int m_nWidth;  // 按钮宽度
    int m_nHeight;  // 按钮高度
    int m_nType;  // 按钮状态-1：划过 2：按下
    QTreeView *tree = nullptr;
};
TreeWidgetEx::ItemDelegate::ItemDelegate(QWidget *parent)
    : QStyledItemDelegate(parent),
      m_PushButton(new QPushButton()),
      m_nSpacing(5),
      m_nWidth(35),
      m_nHeight(35)
{
    // 设置按钮正常、划过、按下样式
    m_PushButton->setStyleSheet("QPushButton {background-color: transparent;}");
    tree = reinterpret_cast<QTreeView*>(parent);
}

TreeWidgetEx::ItemDelegate::~ItemDelegate()
{

}

void TreeWidgetEx::ItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
//保存按钮状态
    painter->save();
    QStyleOptionViewItem viewOption(option);
    initStyleOption(&viewOption, index);
    if (option.state.testFlag(QStyle::State_HasFocus))
        viewOption.state = viewOption.state ^ QStyle::State_HasFocus;

//抗锯齿绘图
    painter->setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    //绘制背景
    QColor colorBg = QColor(53, 77, 159);
    //操作状态 选择、划过等
    if (option.state & QStyle::State_Selected) {
        if(index.data(TreeWidgetEx::selectRole).isValid())
            colorBg = QColor(53, 77, 100);
    } else if (option.state & QStyle::State_MouseOver) {
    } else {
    }
    painter->fillRect(option.rect, colorBg);

    int xPoint = 0;

//绘制父节点
    if(index.parent() == QModelIndex())
    {
        if(static_cast<QStandardItemModel*>(tree->model())->rowCount(index) >= 1)
        {
            //绘制三角形图片
            painter->setPen(QColor(255,255,255));
            painter->setBrush(QColor(255,255,255));

            QVector<QPointF> points;
            int margin = option.rect.width()/32/*25*/;
            //绘制的三角形所在的正方形框矩阵
            QRect rect = option.rect;
            int rwh = qMin(option.rect.width()/20,option.rect.height()/4);
            rect.setX(option.rect.x() + margin);
            rect.setY(option.rect.y() + (option.rect.height() - rwh)/2/*/80*23*/);
            rect.setWidth(rwh);
            rect.setHeight(rwh);

            xPoint = rect.right();

            if (!tree->isExpanded(index)) {
            //收起的三角形
                points.append(QPointF(rect.x(), rect.y()));
                points.append(QPointF(rect.x(), rect.y()+rect.height()));
                points.append(QPointF(rect.x()+rect.width(), rect.y()+rect.height()/2));
            } else {
            //展开的三角形
                points.append(QPointF(rect.x(), rect.y()));
                points.append(QPointF(rect.x()+rect.width(), rect.y()));
                points.append(QPointF(rect.x()+rect.width()/2, rect.y()+rect.height()));
            }

            painter->drawPolygon(points);
        }

        //绘制分隔线条

        painter->setPen(QPen(QColor(255,255,255) 1));
        painter->drawLine(QPointF(option.rect.x(), option.rect.y()),
                          QPointF(option.rect.x() + option.rect.width(), option.rect.y()));

    }

//    绘制条目文字
    QColor colorText = QColor(255, 255, 255);
    painter->setPen(QPen(colorText));
    //绘制文字离左边的距离
    int margin = static_cast<int>((static_cast<double>(option.rect.width())/400.0)*80.0);
    int textWidget = static_cast<int>((static_cast<double>(option.rect.width())/400.0)*200.0);
    int margin1 = static_cast<int>((static_cast<double>(option.rect.width())/400.0)*200.0);

    QRect rect = option.rect;
    rect.setX(option.rect.x() + margin);
    rect.setWidth(option.rect.width() - margin);

    QFont normalFont("Segoe UI", 24);
    QString text = index.data(Qt::DisplayRole).toString();
        for(int i = 24;i > 0;i--){
            normalFont.setPointSize(i);
            QFontMetrics fontMetrics(normalFont);
            if(fontMetrics.boundingRect(text).width() < textWidget)
                break;
        }

    painter->setFont(normalFont);
    painter->drawText(rect, Qt::AlignLeft | Qt::AlignVCenter, text);

    // 计算按钮显示区域
    int nTop = static_cast<int>(static_cast<double>(option.rect.height())/80.0*23);
    // 绘制按钮
    QStyleOptionButton button;
    button.rect = QRect(option.rect.right() - static_cast<int>(static_cast<double>(option.rect.width())/400.0*19) - static_cast<int>(static_cast<double>(option.rect.height())/80.0*35),
                        option.rect.top() + nTop,  static_cast<int>(static_cast<double>(option.rect.height())/80.0*35), static_cast<int>(static_cast<double>(option.rect.height())/80.0*35));

    button.state |= QStyle::State_Enabled;

        if(index.data(TreeWidgetEx::nodeState).toBool())
        {
            button.icon = QIcon(QString(":/new/prefix1/icon/*.png"));
            button.iconSize = QSize(button.rect.width(),button.rect.height());
        }else{
            button.icon = QIcon(QString(":/new/prefix1/*"));
            button.iconSize = QSize(button.rect.width(),button.rect.height());
        }
    //划过按下
    if (button.rect.contains(m_mousePoint))
    {
        if (m_nType == 0)
        {
            button.state |= QStyle::State_MouseOver;
        }
        else if (m_nType == 1)
        {
            button.state |= QStyle::State_Sunken;
            button.iconSize = QSize(button.rect.width()/2,button.rect.height()/2);
        }else if (m_nType == -1) {
        }
    }
    QWidget *pWidget = m_PushButton.data();
    pWidget->style()->drawControl(QStyle::CE_PushButton, &button, painter,pWidget);
    painter->restore();//恢复painter
}
//点击事件
bool TreeWidgetEx::ItemDelegate::editorEvent(QEvent *event, QAbstractItemModel *model, const QStyleOptionViewItem &option, const QModelIndex &index)
{
    Q_UNUSED(model);
    m_nType = -1;
    bool bRepaint = false;
    QMouseEvent *pEvent = static_cast<QMouseEvent *> (event);
    m_mousePoint = pEvent->pos();

    int nTop = static_cast<int>(static_cast<double>(option.rect.height())/80.0*23);
    // 还原鼠标样式
    {
        QStyleOptionButton button;

//按钮位置
button.rect = QRect(option.rect.right() - static_cast<int>(static_cast<double>(option.rect.width())/400.0*19) - static_cast<int>(static_cast<double>(option.rect.height())/80.0*35),
                            option.rect.top() + nTop,  static_cast<int>(static_cast<double>(option.rect.height())/80.0*35), static_cast<int>(static_cast<double>(option.rect.height())/80.0*35));
        // 鼠标位于按钮之上
        if (!button.rect.contains(m_mousePoint))
        {
            if(event->type() ==  QEvent::MouseButtonRelease)
                tree->setExpanded(index,!tree->isExpanded(index));
            return bRepaint;
        }
        bRepaint = true;
        switch (event->type())
        {
        // 鼠标滑过
        case QEvent::MouseMove:
        {
            // 设置鼠标样式为手型
            m_nType = 0;
            break;
        }
        // 鼠标按下
        case QEvent::MouseButtonPress:
        {
            m_nType = 1;
            break;
        }
        // 鼠标释放
        case QEvent::MouseButtonRelease:
        {
                emit pushButtonClick(index);
            break;
        }
        default:
            break;
        }
    }

    return bRepaint;
}