简述

如题所示，本篇文章主要展示博主在仿照酷狗做播放器的时候，模仿酷狗导航栏及其实现的代码。
酷狗原图：

实现效果：

实现原理

酷狗的导航条是控制下面所要展示的控件的，所以我采用的是继承QPushButton来进行导航条的设置，方便以后QStackedWidget的显示。
在这里说一下酷狗导航条的各部分效果。
normal:没什么特别。
hover:字体颜色改变。
clicked:字体颜色改变并且在按钮底部添加横线
在点击了其它QPushButton后，原有按钮变为normal状态，酷狗本身还实现了横线的动画，在这里不予实现。

实现代码

//说明一下BasePushButton只是继承了QPushButton后实现了鼠标的样式改变，其它并未有什么不同，可当做QPushButton看，并且这个类没有实现横线的添加，因为在博主项目中有用到不要横线的导航条。
enum StackPushButtonStatus
{
    Normal = 0,
    Hover = 1,
    Click = 2
};
class StackBasePushButton :public BasePushButton
{
    Q_OBJECT
public:
    StackBasePushButton(QWidget *parent = Q_NULLPTR);
    StackBasePushButton();
    void setFlag(const int is)
    {
        flag = is;
        update();
    }
protected:
    void enterEvent(QEvent *event) override;
    void leaveEvent(QEvent *event) override;
    void paintEvent(QPaintEvent *Event) override;
    QColor fontColor;
    int flag;
};

//这里是cpp文件
StackBasePushButton::StackBasePushButton(QWidget *parent)
    :BasePushButton(parent)
    ,fontColor(QColor(48,147,231))
    ,flag(StackPushButtonStatus::Normal)
{
}
StackBasePushButton::StackBasePushButton()
{}
void StackBasePushButton::enterEvent(QEvent *event)
{
    if(flag != StackPushButtonStatus::Click)
    setFlag(StackPushButtonStatus::Hover);
    return BasePushButton::enterEvent(event);
}
void StackBasePushButton::leaveEvent(QEvent *event)
{
    if(flag!=StackPushButtonStatus::Click)
    setFlag(StackPushButtonStatus::Normal);
    return BasePushButton::enterEvent(event);
}
void StackBasePushButton::paintEvent(QPaintEvent *event)
{
    if (flag == StackPushButtonStatus::Normal)
    {
        QPalette ple = this->palette();
        ple.setColor(QPalette::ButtonText, Qt::black);
        this->setPalette(ple);
    }
    else if (flag == StackPushButtonStatus::Hover)
    {
        QPalette ple = this->palette();
        ple.setColor(QPalette::ButtonText, fontColor);
        this->setPalette(ple);
    }
    return BasePushButton::paintEvent(event);
}

//这个类只是在绘制事件中添加了click的处理
class StackPushButton :public StackBasePushButton
{
    Q_OBJECT
public:
    StackPushButton(QWidget *parent = Q_NULLPTR);
    ~StackPushButton();

protected:
    void paintEvent(QPaintEvent *Event) override;
    const int LineWidth = 4;

};
//cpp
StackPushButton::StackPushButton(QWidget *parent)
    :StackBasePushButton(parent)
{
}
StackPushButton::~StackPushButton()
{
}

void StackPushButton::paintEvent(QPaintEvent *event)
{
    if (flag==StackPushButtonStatus::Click)
    {
        QPalette ple = this->palette();
        ple.setColor(QPalette::ButtonText, fontColor);
        this->setPalette(ple);
        QPainter painter(this);
        painter.setPen(QColor(55, 175, 254));
        painter.drawLine(QPoint(0, height() - LineWidth), QPoint(width(), height() - LineWidth));

    }
    return StackBasePushButton::paintEvent(event);
}

部分总结

经过以上的QPushButton的自定义后，我们有了导航条的基本控件。现在我们需要的在点击其它按钮时，恢复之前所点击过的按钮状态为normal。

//这里给出关键代码，每个按钮的clicked都与这个槽相连接
void  MiddleRightGuideWidget::slt_buttonsClick()
{
    StackPushButton *button = static_cast<StackPushButton *>(sender());
    musicLibary->setFlag(StackPushButtonStatus::Normal);
    radioStation->setFlag(StackPushButtonStatus::Normal);
    songList->setFlag(StackPushButtonStatus::Normal);
    MV->setFlag(StackPushButtonStatus::Normal);
    lyrics->setFlag(StackPushButtonStatus::Normal);
    if (button == musicLibary)
    {
        musicLibary->setFlag(StackPushButtonStatus::Click);
    }
    else if (button == radioStation)
    {
        radioStation->setFlag(StackPushButtonStatus::Click);
    }
    else if (button == songList)
    {
        songList->setFlag(StackPushButtonStatus::Click);
    }
    else if (button == MV)
    {
        MV->setFlag(StackPushButtonStatus::Click);
    }
    else if (button == lyrics)
    {
        lyrics->setFlag(StackPushButtonStatus::Click);
    }
}