Qt编写自定义控件46-树状导航栏 - QTCN开发网

#ifndef NAVLISTVIEW_H
#define NAVLISTVIEW_H

/**
* 树状导航栏控件作者:feiyangqingyun(QQ:517216493) 2018-8-15
* 1:设置节点数据相当方便,按照对应格式填入即可,分隔符,
* 2:可设置提示信息是否显示+宽度
* 3:可设置行分隔符是否显示+高度+颜色
* 4:可设置选中节点线条突出显示+颜色+左侧右侧位置
* 5:可设置选中节点三角形突出显示+颜色+左侧右侧位置
* 6:可设置父节点的选中颜色+悬停颜色+默认颜色
* 7:可设置子节点的选中颜色+悬停颜色+默认颜色
* 8:可设置父节点文字的图标边距+左侧距离+字体大小+高度
* 9:可设置子节点文字的图标边距+左侧距离+字体大小+高度
* 10:可设置节点展开模式单击+双击+禁用
*/

#include <QStyledItemDelegate>
#include <QAbstractListModel>
#include <QListView>
#include <QStringList>

class NavListView;

class NavDelegate : public QStyledItemDelegate
{
    Q_OBJECT
public:
    NavDelegate(QObject *parent);
    ~NavDelegate();

protected:
    QSize sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const ;
    void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const;

private:
    NavListView *nav;
    QFont iconFont;
};

class NavModel : public QAbstractListModel
{
    Q_OBJECT
public:
    NavModel(QObject *parent);
    ~NavModel();

public:
    struct TreeNode {
        int level;                  //层级,父节点-1,子节点-2
        bool expand;                //是否打开子节点
        bool last;                  //是否末尾元素
        QChar icon;                 //左侧图标
        QString text;               //显示的节点文字
        QString tip;                //右侧描述文字
        QString parentText;         //父节点名称
        QList<TreeNode *> children; //子节点集合
    };

    struct ListNode {
        QString text;               //节点文字
        TreeNode *treeNode;         //节点指针
    };

protected:
    int rowCount(const QModelIndex &parent) const;
    QVariant data(const QModelIndex &index, int role) const;

private:
    QList<TreeNode *> treeNode;
    QList<ListNode> listNode;

public Q_SLOTS:
    void setItems(const QStringList &items);
    void expand(const QModelIndex &index);

private:
    void refreshList();
};

#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif

class QDESIGNER_WIDGET_EXPORT NavListView : public QListView
#else
class NavListView : public QListView
#endif

{
    Q_OBJECT
    Q_ENUMS(ExpendMode)

    Q_PROPERTY(QString items READ getItems WRITE setItems)
    Q_PROPERTY(bool rightIconVisible READ getRightIconVisible WRITE setRightIconVisible)
    Q_PROPERTY(bool tipVisible READ getTipVisible WRITE setTipVisible)
    Q_PROPERTY(int tipWidth READ getTipWidth WRITE setTipWidth)

    Q_PROPERTY(bool separateVisible READ getSeparateVisible WRITE setSeparateVisible)
    Q_PROPERTY(int separateHeight READ getSeparateHeight WRITE setSeparateHeight)
    Q_PROPERTY(QColor separateColor READ getSeparateColor WRITE setSeparateColor)

    Q_PROPERTY(bool lineLeft READ getLineLeft WRITE setLineLeft)
    Q_PROPERTY(bool lineVisible READ getLineVisible WRITE setLineVisible)
    Q_PROPERTY(int lineWidth READ getLineWidth WRITE setLineWidth)
    Q_PROPERTY(QColor lineColor READ getLineColor WRITE setLineColor)

    Q_PROPERTY(bool triangleLeft READ getTriangleLeft WRITE setTriangleLeft)
    Q_PROPERTY(bool triangleVisible READ getTriangleVisible WRITE setTriangleVisible)
    Q_PROPERTY(int triangleWidth READ getTriangleWidth WRITE setTriangleWidth)
    Q_PROPERTY(QColor triangleColor READ getTriangleColor WRITE setTriangleColor)

    Q_PROPERTY(int parentIconMargin READ getParentIconMargin WRITE setParentIconMargin)
    Q_PROPERTY(int parentMargin READ getParentMargin WRITE setParentMargin)
    Q_PROPERTY(int parentFontSize READ getParentFontSize WRITE setParentFontSize)
    Q_PROPERTY(int parentHeight READ getParentHeight WRITE setParentHeight)
    Q_PROPERTY(QColor parentBgNormalColor READ getParentBgNormalColor WRITE setParentBgNormalColor)
    Q_PROPERTY(QColor parentBgSelectedColor READ getParentBgSelectedColor WRITE setParentBgSelectedColor)
    Q_PROPERTY(QColor parentBgHoverColor READ getParentBgHoverColor WRITE setParentBgHoverColor)
    Q_PROPERTY(QColor parentTextNormalColor READ getParentTextNormalColor WRITE setParentTextNormalColor)
    Q_PROPERTY(QColor parentTextSelectedColor READ getParentTextSelectedColor WRITE setParentTextSelectedColor)
    Q_PROPERTY(QColor parentTextHoverColor READ getParentTextHoverColor WRITE setParentTextHoverColor)

    Q_PROPERTY(int childIconMargin READ getChildIconMargin WRITE setChildIconMargin)
    Q_PROPERTY(int childMargin READ getChildMargin WRITE setChildMargin)
    Q_PROPERTY(int childFontSize READ getChildFontSize WRITE setChildFontSize)
    Q_PROPERTY(int childHeight READ getChildHeight WRITE setChildHeight)
    Q_PROPERTY(QColor childBgNormalColor READ getChildBgNormalColor WRITE setChildBgNormalColor)
    Q_PROPERTY(QColor childBgSelectedColor READ getChildBgSelectedColor WRITE setChildBgSelectedColor)
    Q_PROPERTY(QColor childBgHoverColor READ getChildBgHoverColor WRITE setChildBgHoverColor)
    Q_PROPERTY(QColor childTextNormalColor READ getChildTextNormalColor WRITE setChildTextNormalColor)
    Q_PROPERTY(QColor childTextSelectedColor READ getChildTextSelectedColor WRITE setChildTextSelectedColor)
    Q_PROPERTY(QColor childTextHoverColor READ getChildTextHoverColor WRITE setChildTextHoverColor)

    Q_PROPERTY(ExpendMode expendMode READ getExpendMode WRITE setExpendMode)

public:
    //节点展开模式
    enum ExpendMode {
        ExpendMode_SingleClick = 0, //单击模式
        ExpendMode_DoubleClick = 1, //双击模式
        ExpendMode_NoClick = 2,     //不可单击双击
    };

    NavListView(QWidget *parent = 0);
    ~NavListView();

private:
    NavModel *model;                //数据模型
    NavDelegate *delegate;          //数据委托
    QStringList parentItem;         //父节点数据集合
    QList<QStringList> childItem;   //子节点数据

    QString items;                  //节点集合
    bool rightIconVisible;          //右侧图标是否显示
    bool tipVisible;                //是否显示提示信息
    int tipWidth;                   //提示信息宽度

    bool separateVisible;           //是否显示行分隔符
    int separateHeight;             //行分隔符高度
    QColor separateColor;           //行分隔符颜色

    bool lineLeft;                  //是否显示在左侧
    bool lineVisible;               //是否显示线条
    int lineWidth;                  //线条宽度
    QColor lineColor;               //线条颜色

    bool triangleLeft;              //是否显示在左侧
    bool triangleVisible;           //是否显示三角形
    int triangleWidth;              //三角形宽度
    QColor triangleColor;           //三角形颜色

    int parentIconMargin;           //父节点图标边距
    int parentMargin;               //父节点边距
    int parentFontSize;             //父节点字体大小
    int parentHeight;               //父节点高度
    QColor parentBgNormalColor;     //父节点正常背景色
    QColor parentBgSelectedColor;   //父节点选中背景色
    QColor parentBgHoverColor;      //父节点悬停背景色
    QColor parentTextNormalColor;   //父节点正常文字颜色
    QColor parentTextSelectedColor; //父节点选中文字颜色
    QColor parentTextHoverColor;    //父节点悬停文字颜色

    int childIconMargin;            //子节点图标边距
    int childMargin;                //子节点边距
    int childFontSize;              //子节点字体大小
    int childHeight;                //子节点高度
    QColor childBgNormalColor;      //子节点正常背景色
    QColor childBgSelectedColor;    //子节点选中背景色
    QColor childBgHoverColor;       //子节点悬停背景色
    QColor childTextNormalColor;    //子节点正常文字颜色
    QColor childTextSelectedColor;  //子节点选中文字颜色
    QColor childTextHoverColor;     //子节点悬停文字颜色

    ExpendMode expendMode;          //节点展开模式单击/双击/禁用

private slots:
    void pressed(const QModelIndex &data);
    void setData(const QStringList &listItems);

public:
    QString getItems()              const;
    bool getRightIconVisible()      const;
    bool getTipVisible()            const;
    int getTipWidth()               const;

    bool getSeparateVisible()       const;
    int getSeparateHeight()         const;
    QColor getSeparateColor()       const;

    bool getLineLeft()              const;
    bool getLineVisible()           const;
    int getLineWidth()              const;
    QColor getLineColor()           const;

    bool getTriangleLeft()          const;
    bool getTriangleVisible()       const;
    int getTriangleWidth()          const;
    QColor getTriangleColor()       const;

    int getParentIconMargin()       const;
    int getParentMargin()           const;
    int getParentFontSize()         const;
    int getParentHeight()           const;
    QColor getParentBgNormalColor() const;
    QColor getParentBgSelectedColor()const;
    QColor getParentBgHoverColor()  const;
    QColor getParentTextNormalColor()const;
    QColor getParentTextSelectedColor()const;
    QColor getParentTextHoverColor()const;

    int getChildIconMargin()        const;
    int getChildMargin()            const;
    int getChildFontSize()          const;
    int getChildHeight()            const;
    QColor getChildBgNormalColor()  const;
    QColor getChildBgSelectedColor()const;
    QColor getChildBgHoverColor()   const;
    QColor getChildTextNormalColor()const;
    QColor getChildTextSelectedColor()const;
    QColor getChildTextHoverColor() const;

    ExpendMode getExpendMode()      const;

    QSize sizeHint()                const;
    QSize minimumSizeHint()         const;

public Q_SLOTS:
    //设置节点数据
    void setItems(const QString &items);
    //设置选中指定行
    void setCurrentRow(int row);
    //设置父节点右侧图标是否显示
    void setRightIconVisible(bool rightIconVisible);

    //设置提示信息是否显示+宽度
    void setTipVisible(bool tipVisible);
    void setTipWidth(int tipWidth);

    //设置行分隔符是否显示+高度+颜色
    void setSeparateVisible(bool separateVisible);
    void setSeparateHeight(int separateHeight);
    void setSeparateColor(const QColor &separateColor);

    //设置线条位置+可见+宽度+颜色
    void setLineLeft(bool lineLeft);
    void setLineVisible(bool lineVisible);
    void setLineWidth(int lineWidth);
    void setLineColor(const QColor &lineColor);

    //设置三角形位置+可见+宽度+颜色
    void setTriangleLeft(bool triangleLeft);
    void setTriangleVisible(bool triangleVisible);
    void setTriangleWidth(int triangleWidth);
    void setTriangleColor(const QColor &triangleColor);

    //设置父节点图标边距+左侧边距+字体大小+节点高度+颜色集合
    void setParentIconMargin(int parentIconMargin);
    void setParentMargin(int parentMargin);
    void setParentFontSize(int parentFontSize);
    void setParentHeight(int parentHeight);
    void setParentBgNormalColor(const QColor &parentBgNormalColor);
    void setParentBgSelectedColor(const QColor &parentBgSelectedColor);
    void setParentBgHoverColor(const QColor &parentBgHoverColor);
    void setParentTextNormalColor(const QColor &parentTextNormalColor);
    void setParentTextSelectedColor(const QColor &parentTextSelectedColor);
    void setParentTextHoverColor(const QColor &parentTextHoverColor);

    //设置子节点图标边距+左侧边距+字体大小+节点高度+颜色集合
    void setChildIconMargin(int childIconMargin);
    void setChildMargin(int childMargin);
    void setChildFontSize(int childFontSize);
    void setChildHeight(int childHeight);
    void setChildBgNormalColor(const QColor &childBgNormalColor);
    void setChildBgSelectedColor(const QColor &childBgSelectedColor);
    void setChildBgHoverColor(const QColor &childBgHoverColor);
    void setChildTextNormalColor(const QColor &childTextNormalColor);
    void setChildTextSelectedColor(const QColor &childTextSelectedColor);
    void setChildTextHoverColor(const QColor &childTextHoverColor);

    //设置节点展开模式
    void setExpendMode(const ExpendMode &expendMode);

Q_SIGNALS:
    void pressed(const QString &text, const QString &parentText);
    void pressed(int index, int parentIndex);
    void pressed(int childIndex);
};

#endif // NAVLISTVIEW_H

void NavDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    painter->setRenderHint(QPainter::Antialiasing);
    NavModel::TreeNode *node = (NavModel::TreeNode *)index.data(Qt::UserRole).toULongLong();

    //定义变量存储区域
    QRect optionRect = option.rect;
    int x = optionRect.x();
    int y = optionRect.y();
    int width = optionRect.width();
    int height = optionRect.height();

    int fontSize = nav->getParentFontSize();

    //父节点和子节点颜色分开设置
    bool parent = (node->level == 1);

    //根据不同的状态设置不同的颜色 bgColor-主背景色 textColor-主文字颜色 tipBgColor-提示信息背景颜色 tipTextColor-提示信息文字颜色
    QColor bgColor, textColor, tipBgColor, tipTextColor, iconColor;
    if (option.state & QStyle::State_Selected) {
        bgColor = parent ? nav->getParentBgSelectedColor() : nav->getChildBgSelectedColor();
        textColor = parent ? nav->getParentTextSelectedColor() : nav->getChildTextSelectedColor();
        tipBgColor = parent ? nav->getParentTextSelectedColor() : nav->getChildTextSelectedColor();
        tipTextColor = parent ? nav->getParentBgSelectedColor() : nav->getChildBgSelectedColor();
        iconColor = parent ? nav->getParentTextSelectedColor() : nav->getChildTextSelectedColor();
    } else if (option.state & QStyle::State_MouseOver) {
        bgColor = parent ? nav->getParentBgHoverColor() : nav->getChildBgHoverColor();
        textColor = parent ? nav->getParentTextHoverColor() : nav->getChildTextHoverColor();
        tipBgColor = parent ? nav->getParentTextSelectedColor() : nav->getChildTextSelectedColor();
        tipTextColor = parent ? nav->getParentBgSelectedColor() : nav->getChildBgSelectedColor();
        iconColor = parent ? nav->getParentTextHoverColor() : nav->getChildTextHoverColor();
    } else {
        bgColor = parent ? nav->getParentBgNormalColor() : nav->getChildBgNormalColor();
        textColor = parent ? nav->getParentTextNormalColor() : nav->getChildTextNormalColor();
        tipBgColor = parent ? nav->getParentBgSelectedColor() : nav->getChildBgSelectedColor();
        tipTextColor = parent ? nav->getParentTextSelectedColor() : nav->getChildTextSelectedColor();
        iconColor = parent ? nav->getParentTextNormalColor() : nav->getChildTextNormalColor();
    }

    //绘制背景
    painter->fillRect(optionRect, bgColor);

    //绘制线条,目前限定子节点绘制,如果需要父节点也绘制则取消parent判断即可
    int lineWidth = nav->getLineWidth();
    if (!parent && nav->getLineVisible() && lineWidth > 0) {
        if ((option.state & QStyle::State_Selected) || (option.state & QStyle::State_MouseOver)) {
            //设置偏移量,不然上下部分会有点偏移
            float offset = (float)lineWidth / 2;

            //计算上下两个坐标点
            QPointF pointTop(x, y + offset);
            QPointF pointBottom(x, height + y - offset);
            if (!nav->getLineLeft()) {
                pointTop.setX(width);
                pointBottom.setX(width);
            }

            //设置线条颜色和宽度
            painter->setPen(QPen(nav->getLineColor(), lineWidth));
            painter->drawLine(pointTop, pointBottom);
        }
    }

    //绘制三角形,目前限定子节点绘制,如果需要父节点也绘制则取消parent判断即可
    int triangleWidth = nav->getTriangleWidth();
    if (!parent && nav->getTriangleVisible() && triangleWidth > 0) {
        if ((option.state & QStyle::State_Selected) || (option.state & QStyle::State_MouseOver)) {
            QFont font = iconFont;
            font.setPixelSize(fontSize + triangleWidth);
            painter->setFont(font);
            painter->setPen(nav->getTriangleColor());

            //采用图形字体中的三角形绘制
            if (nav->getTriangleLeft()) {
                painter->drawText(optionRect, Qt::AlignLeft | Qt::AlignVCenter, QChar(0xf0da));
            } else {
                painter->drawText(optionRect, Qt::AlignRight | Qt::AlignVCenter, QChar(0xf0d9));
            }
        }
    }

    //绘制行分隔符
    if (nav->getSeparateVisible()) {
        if (node->level == 1 || (node->level == 2 && node->last)) {
            painter->setPen(QPen(nav->getSeparateColor(), nav->getSeparateHeight()));
            painter->drawLine(QPointF(x, y + height), QPointF(x + width, y + height));
        }
    }

    //绘制文字,如果文字为空则不绘制
    QString text = node->text;
    if (!text.isEmpty()) {
        //文字离左边的距离+字体大小
        int margin = nav->getParentMargin();
        if (node->level == 2) {
            margin = nav->getChildMargin();
            fontSize = nav->getChildFontSize();
        }

        //计算文字区域
        QRect textRect = optionRect;
        textRect.setWidth(width - margin);
        textRect.setX(x + margin);

        QFont font;
        font.setPixelSize(fontSize);
        painter->setFont(font);
        painter->setPen(textColor);
        painter->drawText(textRect, Qt::AlignLeft | Qt::AlignVCenter, text);
    }

    //绘制提示信息,如果不需要显示提示信息或者提示信息为空则不绘制
    QString tip = node->tip;
    if (nav->getTipVisible() && !tip.isEmpty()) {
        //如果是数字则将超过999的数字显示成 999+
        //如果显示的提示信息长度过长则将多余显示成省略号 .
        if (tip.toInt() > 0) {
            tip = tip.toInt() > 999 ? "999+" : tip;
        } else if (tip.length() > 2) {
            tip = tip.left(2) + " .";
        }

        //计算绘制区域,半径取高度的四分之一
        int radius = height / 4;
        QRect tipRect = optionRect;
        tipRect.setHeight(radius * 2);
        tipRect.moveCenter(optionRect.center());
        tipRect.setLeft(optionRect.right() - nav->getTipWidth() - 5);
        tipRect.setRight(optionRect.right() - 5);

        //设置字体大小
        QFont font;
        font.setPixelSize(fontSize - 2);
        painter->setFont(font);

        //绘制提示文字的背景
        painter->setPen(Qt::NoPen);
        painter->setBrush(tipBgColor);
        painter->drawRoundedRect(tipRect, radius, radius);

        //绘制提示文字
        painter->setPen(tipTextColor);
        painter->setBrush(Qt::NoBrush);
        painter->drawText(tipRect, Qt::AlignCenter, tip);
    }

    //计算绘制图标区域
    QRect iconRect = optionRect;
    iconRect.setLeft(parent ? nav->getParentIconMargin() : nav->getChildIconMargin());

    //设置图形字体和画笔颜色
    QFont font = iconFont;
    font.setPixelSize(fontSize);
    painter->setFont(font);
    painter->setPen(textColor);

    //绘制左侧图标,有图标则绘制图标,没有的话父窗体取 + -
    if (!node->icon.isNull()) {
        painter->drawText(iconRect, Qt::AlignLeft | Qt::AlignVCenter, node->icon);
    } else if (parent) {
        if (node->expand) {
            painter->drawText(iconRect, Qt::AlignLeft | Qt::AlignVCenter, QChar(0xf067));
        } else {
            painter->drawText(iconRect, Qt::AlignLeft | Qt::AlignVCenter, QChar(0xf068));
        }
    }

    //绘制父节点右侧图标
    iconRect.setRight(optionRect.width() - 10);
    if (!(nav->getTipVisible() && !node->tip.isEmpty()) && nav->getRightIconVisible() && parent) {
        if (node->expand) {
            painter->drawText(iconRect, Qt::AlignRight | Qt::AlignVCenter, QChar(0xf054));
        } else {
            painter->drawText(iconRect, Qt::AlignRight | Qt::AlignVCenter, QChar(0xf078));
        }
    }
}