QT样式学习-侧边栏隐藏和滑出

最简单的方法，直接按钮实现侧边栏sideWidget的隐藏和出现，但显示和隐藏很突兀不够平滑，于是使用QT的动画框架实现线性滑出和隐藏

快速实现侧边栏隐藏和滑出

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QPropertyAnimation>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    Ui::MainWindow *ui;

    QPropertyAnimation *m_animationSideWidget; // 设置侧边栏的动画
    QPropertyAnimation *m_animationBtn; // 设置侧边栏按钮的动画
    bool m_sideFlag = false; // 侧边栏隐藏/显示的标志位flag

private slots:
    void on_pushButton_clicked();
};

#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    ui->widget_side->move(-ui->widget_side->width(),0);// 左侧停靠
    ui->pushButton->move(-1,ui->widget_side->height()/2);

    m_animationSideWidget = new QPropertyAnimation(ui->widget_side,"geometry");//为geometry属性创建动画
    m_animationSideWidget->setEasingCurve(QEasingCurve::InOutSine); //缓和曲线 即运动轨迹
    m_animationSideWidget->setDuration(800);//动画时间

    m_animationBtn = new QPropertyAnimation(ui->pushButton,"geometry");
    m_animationBtn->setEasingCurve(QEasingCurve::InOutSine);
    m_animationBtn->setDuration(800);
    ui->pushButton->setText(">>");
}

MainWindow::~MainWindow()
{
    delete ui;
}void MainWindow::on_pushButton_clicked()
{
    //显示侧边栏
    if(!m_sideFlag)
    {
		//m_animationSideWidget->setDuration(3000); 设置动画的持续时间，可以试试设置长一点观察动画
        //m_animationBtn->setDuration(3000);
        
        //设置动画开始和结束时geometry属性的值
        m_animationSideWidget->setStartValue(QRect(-this->rect().width(),0,ui->widget_side->width(),ui->widget_side->height()));
        m_animationSideWidget->setEndValue(QRect(0,0,ui->widget_side->width(),ui->widget_side->height()));
        
        m_animationSideWidget->start(); //开始动画

        m_animationBtn->setStartValue(QRect(-1,ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height()));
        m_animationBtn->setEndValue(QRect(ui->widget_side->width()-2,ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height()));
        m_animationBtn->start();
        ui->pushButton->setText("<<");
        m_sideFlag = !m_sideFlag;
    }
    else
    {
        m_animationSideWidget->setStartValue(QRect(0,0,ui->widget_side->width(),ui->widget_side->height()));
        m_animationSideWidget->setEndValue(QRect(-this->rect().width(),0,ui->widget_side->width(),ui->widget_side->height()));
        m_animationSideWidget->start();

        m_animationBtn->setStartValue(QRect(ui->widget_side->width()-2,ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height()));
        m_animationBtn->setEndValue(QRect(-1,ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height()));
        m_animationBtn->start();
        ui->pushButton->setText(">>");
        m_sideFlag = !m_sideFlag;
    }
}

tip：为方便观察可以给侧边栏的sideWidget设置一个背景色

优化

侧边栏隐藏和滑出基本实现了，但有个问题，现在动画时先sideWidget移动，再pushbutton移动，导致有延迟，使用动画组让按钮和侧边栏同时动。

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QPropertyAnimation>
#include <QParallelAnimationGroup>
namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    Ui::MainWindow *ui;

    QPropertyAnimation *m_animationSideWidget;
    QPropertyAnimation *m_animationBtn;
    QParallelAnimationGroup *animationGroup;
    bool m_sideFlag = false;

private slots:
    void on_pushButton_clicked();

};

#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    ui->widget_side->move(-ui->widget_side->width(),0);// 左侧停靠
    ui->pushButton->move(-1,ui->widget_side->height()/2);

    m_animationSideWidget = new QPropertyAnimation(ui->widget_side,"geometry");//为geometry属性创建动画
    m_animationSideWidget->setEasingCurve(QEasingCurve::InOutSine); //缓和曲线
    m_animationSideWidget->setDuration(400);//动画时间

    m_animationBtn = new QPropertyAnimation(ui->pushButton,"geometry");
    m_animationBtn->setEasingCurve(QEasingCurve::InOutSine);
    m_animationBtn->setDuration(800);

    //动画组
    animationGroup=new QParallelAnimationGroup(this);
    animationGroup->addAnimation(m_animationBtn);
    animationGroup->addAnimation(m_animationSideWidget);

}

MainWindow::~MainWindow()
{
    delete ui;
}void MainWindow::on_pushButton_clicked()
{
    //显示侧边栏
    if(!m_sideFlag)
    {
        //设置动画开始和结束时geometry属性的值
//        m_animationSideWidget->setDuration(3000);
//        m_animationBtn->setDuration(3000);
        m_animationSideWidget->setStartValue(QRect(-this->rect().width(),0,ui->widget_side->width(),ui->widget_side->height()));
        m_animationSideWidget->setEndValue(QRect(0,0,ui->widget_side->width(),ui->widget_side->height()));
//        m_animationSideWidget->start();

        m_animationBtn->setStartValue(QRect(0,ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height()));
        m_animationBtn->setEndValue(QRect(ui->widget_side->width(),ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height()));
//        m_animationBtn->start();

        animationGroup->start();

        ui->pushButton->setText("<<");
        m_sideFlag = !m_sideFlag;
    }
    else
    {
        m_animationSideWidget->setStartValue(QRect(0,0,ui->widget_side->width(),ui->widget_side->height()));
        m_animationSideWidget->setEndValue(QRect(-this->rect().width(),0,ui->widget_side->width(),ui->widget_side->height()));
//        m_animationSideWidget->start();

        m_animationBtn->setStartValue(QRect(ui->widget_side->width(),ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height()));
        m_animationBtn->setEndValue(QRect(0,ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height()));
//        m_animationBtn->start();

        animationGroup->start();

        ui->pushButton->setText(">>");
        m_sideFlag = !m_sideFlag;
    }
}

后续可以在优化侧边栏的内容，另外，个人认为可以将侧边栏的按钮剔出去，只让侧边栏滑出和隐藏，按钮固定，类似qq音乐的列表，如图，按钮固定在右下角。