Qt 向导界面

很多桌面应用中现在使用了带向导风格的窗体。今天和大家分享下我简单实现的这个模版（主要是对于开源社区的某个作品进行了修改和优化）。具体代码实现如下：

///qnavigationwidget.h
#ifndef QNAVIGATIONWIDGET_H
#define QNAVIGATIONWIDGET_H

#include <QWidget>
#include <QMouseEvent>
#include <QFont>

class QNavigationWidget : public QWidget
{
    Q_OBJECT
    
public:
    QNavigationWidget(QWidget *parent=0);
    ~QNavigationWidget();

    /// 在尾部增加一个item项目
    void addItem(const QString &title);
    /// 增加多个item项目
    void addItems(const QStringList &titles);
    /// 插入某个item
    void insertItem(int id,const QString &title);
    /// 插入多个items
    void insertItems(int id,const QStringList &titles);

    /// 删除第一个Item
    void removeFirstItem();
    /// 删除最后一个Item
    void removeLastItem();
    /// 删除指定的Item
    void removeItemAt(int id);

    /// 属性设置
    void setWidth(const int &width);
    void setHeight(const int &height);// 整个窗体height
    void setBackgroundColor(const QString &color);
    void setSelectColor(const QString &color);
    void setHoverColor(const QString &color);
    void setRowHeight(const int &height);// 单个item的height
    /// 设置被选中的item
    void setSelectIndex(const int id);
    int getCurrentIndex();


protected:
    void paintEvent(QPaintEvent *);
    void mouseMoveEvent(QMouseEvent *);
    void mousePressEvent(QMouseEvent *);
    void mouseReleaseEvent(QMouseEvent *);

private:
    QList<QString> listItems;
    QString backgroundColor;
    QString selectedColor;
    QString hoverColor;
    int rowHeight;
    int currentIndex;/// 记录当前被选中的按钮

    bool isHover;/// 记录鼠标是否停留在某个item上
    int hoverIndex;/// 记录鼠标停在的item上的索引
    QFont m_font;/// 图标

signals:
    void currentItemChanged(const int &index);
};

#endif

// qnavigationwidget.cpp
#include "qnavigationwidget.h"
#include <QPainter>
#include <QDebug>
#include <stdio.h>
#include <QtMath>
#include "fontawesomeicons.h"

QNavigationWidget::QNavigationWidget(QWidget *parent) : QWidget(parent)
{
    m_font = FontAwesomeIcons::Instance().getFont();
    this->m_font.setPointSize(16);

    isHover = false;
    hoverIndex = 0;

    backgroundColor = "#E4E4E4";
    selectedColor = "#2CA7F8";
    hoverColor = "#3edaef";
    rowHeight = 40;
    currentIndex = 0;

    setMouseTracking(true);
    setFixedWidth(150);
}


QNavigationWidget::~QNavigationWidget()
{
}

void QNavigationWidget::addItem(const QString &title)
{
    listItems << title;

    update();
}

void QNavigationWidget::addItems(const QStringList &titles)
{
    listItems += titles;
    update();
}

void QNavigationWidget::insertItem(int id, const QString &title)
{
    /// 如果id超过当前list最大值，则默认在最后插入
    if( id >listItems.count() ){
        addItem(title);
    }else {
        listItems.insert(id,title);
    }
    update();
}

void QNavigationWidget::insertItems(int id, const QStringList &titles)
{
    /// 如果id超过当前list最大值，则默认在最后插入
    if( id >listItems.count() ){
        addItems(titles);
    }else {
        for(int i=0;i<titles.count();++i){
            listItems.insert(id+i,titles[i]);
        }
    }
    update();

}

void QNavigationWidget::removeFirstItem()
{
    listItems.removeFirst();
    update();

}

void QNavigationWidget::removeLastItem()
{
    listItems.removeLast();
    update();
}

void QNavigationWidget::removeItemAt(int id)
{
    listItems.removeAt(id);
    update();
}

void QNavigationWidget::setWidth(const int &width)
{
    setFixedWidth(width);
}

void QNavigationWidget::setHeight(const int &height)
{
    setFixedHeight(height);
}

void QNavigationWidget::setBackgroundColor(const QString &color)
{
    backgroundColor = color;

    update();
}

void QNavigationWidget::setSelectColor(const QString &color)
{
    selectedColor = color;

    update();
}

void QNavigationWidget::setHoverColor(const QString &color)
{
    hoverColor = color;
    update();
}

void QNavigationWidget::setRowHeight(const int &height)
{
    rowHeight = height;

    update();
}

void QNavigationWidget::setSelectIndex(const int id)
{
     currentIndex = id;
     update();
}

int QNavigationWidget::getCurrentIndex()
{
    return currentIndex;
}

void QNavigationWidget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);

    // Draw background color.
    painter.setPen(Qt::NoPen);
    painter.setBrush(QColor(backgroundColor));
    painter.drawRect(rect());
    painter.setFont(this->m_font);

    // Draw Items
    int count = 0;
    for (const QString &str : listItems) {
        QPainterPath itemPath;
        itemPath.addRect(QRect(0, count * rowHeight, width(), rowHeight));

        if (currentIndex == count) {
            painter.setPen("#FFFFFF");
            painter.fillPath(itemPath, QColor(selectedColor));
        }
        else {
            painter.setPen("#202020");
            painter.fillPath(itemPath, QColor(backgroundColor));
        }

        /// draw hover
        if(isHover && hoverIndex!=currentIndex && hoverIndex == count){
            painter.setPen("#FFFFFF");
            painter.fillPath(itemPath, QColor(hoverColor));
        }
        /// 绘制字体图标
        //painter.drawText(QRect(0, count * rowHeight, width(), rowHeight), Qt::AlignVCenter | Qt::AlignLeft,FontAwesomeIcons::Instance().getIconChar(FontAwesomeIcons::IconIdentity::icon_android));
        /// 绘制文本框
        painter.drawText(QRect(0, count * rowHeight, width(), rowHeight), Qt::AlignVCenter | Qt::AlignHCenter, str);
        /// 绘制图片
        //painter.drawImage(QRect(20, count * rowHeight, 20, 20),QImage(":/2.png"));
        ++count;
    }
}

void QNavigationWidget::mouseMoveEvent(QMouseEvent *e)
{
    if (e->y() / rowHeight < listItems.count()) {
        hoverIndex =  qCeil (e->y() /rowHeight); //向上取整
        isHover = true;
    }else{
        isHover = false;
    }
    update();
}

void QNavigationWidget::mousePressEvent(QMouseEvent *e)
{
    if (e->y() / rowHeight < listItems.count()) {
        currentIndex = e->y() / rowHeight;

        emit currentItemChanged(currentIndex);

        update();
    }
}

void QNavigationWidget::mouseReleaseEvent(QMouseEvent *e)
{
    
}

如果对工程感兴趣的，请按照以下路径下载：

https://pan.baidu.com/s/1XnS4virwoW56Nalet58W3A 密码:1stj