qt动画框架（三）自定义tab滑动导航栏

「爱情、让人受尽委屈。」 2022-07-17 01:09 437阅读 0赞

本章主要介绍用处比较多的**tab滑动从而达到窗体的切换功能，其功能类似与QTabWidget**。实现的效果图如图所示：

![20160824211826516][]

其中tab滑动的效果实现是通过qt的动态框架实现的。

完整资源下载地址：[点击打开链接][Link 1]

代码如下：

#ifndef TABCUSTOME_H
    #define TABCUSTOME_H
    
    #include <QWidget>
    #include<QVariant>
    class QPixmap;
    class QPropertyAnimation;
    namespace Ui {
    class tabCustome;
    }
    
    class tabCustome : public QWidget
    {
        Q_OBJECT
    
    public:
        explicit tabCustome(QWidget *parent = 0);
        ~tabCustome();
    
    protected:
        void paintEvent(QPaintEvent *);
    private slots:
        void slot_animation(QVariant value);
        void slot_finished();
        void slot_currentChanged(int index);
        void slot_recomment(bool);
        void slot_songlist();
        void slot_radiolist();
        void slot_ranklist();
        void slot_singerlist();
    
    private:
        Ui::tabCustome *ui;
        QPixmap m_pic;
        int cur_index;
        QPropertyAnimation *m_animation;
        int m_currentValue;
        bool animation_running;
        int m_index;
        int m_prevIndex;
    
    };
    
    #endif // TABCUSTOME_H

**头文件** **定义解释：**

1、painEvent是实现滑动条的在不同位置的绘制；

2、slot\_animation以及slot\_finished是响应QPropertAnimation的事件；

3、m\_index以及m\_prevIndex是为了记录**当前需要滑动到**的窗体索引以及**当前**的窗体索引。

4、animation\_running是为了让动画结束时能够让滑动条停止显示在必要的位置。

cpp文件的实现：

#include "tabcustome.h"
    #include "ui_tabcustome.h"
    #include<QPropertyAnimation>
    #include<QPainter>
    #include<QDebug>
    #include<QMessageBox>
    tabCustome::tabCustome(QWidget *parent) :
        QWidget(parent),
        ui(new Ui::tabCustome)
    {
        ui->setupUi(this);
        m_pic=QPixmap(":/images/tab.png");
        m_animation=new QPropertyAnimation(this,"");
        m_animation->setDuration(500);
        animation_running=true;
        m_index=-1;
        m_prevIndex=-1;
        ui->stackedWidget->setCurrentIndex(0);
    
        connect(ui->pushButton,SIGNAL(clicked(bool)),this,SLOT(slot_recomment(bool)));
        connect(ui->pushButton_2,SIGNAL(clicked()),this,SLOT(slot_songlist()));
        connect(ui->pushButton_3,SIGNAL(clicked()),this,SLOT(slot_radiolist()));
        connect(ui->pushButton_4,SIGNAL(clicked()),this,SLOT(slot_ranklist()));
        connect(ui->pushButton_5,SIGNAL(clicked()),this,SLOT(slot_singerlist()));
        connect(ui->stackedWidget,SIGNAL(currentChanged(int)),this,SLOT(slot_currentChanged(int)));
        connect(m_animation,SIGNAL(valueChanged(QVariant)),this,SLOT(slot_animation(QVariant)));
        connect(m_animation,SIGNAL(finished()),this,SLOT(slot_finished()));
    }
    
    tabCustome::~tabCustome()
    {
        delete ui;
    }
    
    void tabCustome::slot_currentChanged(int index)
    {
        animation_running=true;
        m_index=index;
        m_animation->setStartValue(ui->pushButton->x()+m_prevIndex*ui->pushButton->width());
        m_animation->setEndValue(ui->pushButton->x()+m_index*ui->pushButton->width());
        m_animation->start();
    }
    void tabCustome::slot_recomment(bool)
    {
        m_prevIndex=ui->stackedWidget->currentIndex();
        ui->stackedWidget->setCurrentIndex(0);
    }
    
    void tabCustome::slot_songlist()
    {
        m_prevIndex=ui->stackedWidget->currentIndex();
        ui->stackedWidget->setCurrentIndex(1);
    }
    void tabCustome::slot_radiolist()
    {
        m_prevIndex=ui->stackedWidget->currentIndex();
        ui->stackedWidget->setCurrentIndex(2);
        qDebug()<<m_index;
    }
    void tabCustome::slot_ranklist()
    {
        m_prevIndex=ui->stackedWidget->currentIndex();
        ui->stackedWidget->setCurrentIndex(3);
        qDebug()<<m_index;
    }
    
    void tabCustome::slot_singerlist()
    {
        m_prevIndex=ui->stackedWidget->currentIndex();
        ui->stackedWidget->setCurrentIndex(4);
        qDebug()<<m_index;
    }
    void tabCustome::paintEvent(QPaintEvent *)
    {
        QPainter p(this);
        p.setPen(Qt::gray);
        if(animation_running)
        {
           p.drawPixmap(m_currentValue+(ui->pushButton->width()-m_pic.width()),ui->pushButton->y()+ui->pushButton->height()+m_pic.height()/2,m_pic);
        }
       else
        {
           p.drawPixmap(m_index*ui->pushButton->width()+(ui->pushButton->width()-m_pic.width()),ui->pushButton->y()+ui->pushButton->height()+m_pic.height()/2,m_pic);
        }
    }
    
    void tabCustome::slot_animation(QVariant value)
    {
        m_currentValue=value.toInt();
        this->update();
    }
    
    void tabCustome::slot_finished()
    {
        animation_running=false;
        this->update();
    }

**实现代码的解释：**

1、m\_animation=newQPropertyAnimation(this,""); 一般而言，对于QPropertyAnimation的初始化，我们会明确第二个参数，即property的属性值，不同的控件会有不同的属性，当然也可以自定义属性。这里定义为空，是因为我们这里只利用到了QPropertyAnimation的value的变化；

2、函数voidtabCustome::slot\_currentChanged(intindex)通过当前的stackWidget的index的变化，从而开启动画框架，动画框架最重要的是记录开始的位置以及结束的位置；

3、通过update()函数从而开启paintEvent事件。

4、通过m\_currentValue的变化，从而控制滑动条滑动的过程，从而实现滑动的效果。

[20160824211826516]: /images/20220717/b6a863edb6b348ec85b7a8ed284b672c.png
[Link 1]: http://download.csdn.net/detail/mao19931004/9612069