苏州h5建站_陕西省住房和城乡建设厅网官网_电商网站订烟平台官网_视频广告

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

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

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QPropertyAnimation>namespace Ui {
class MainWindow;
}class MainWindow : public QMainWindow
{Q_OBJECTpublic:explicit MainWindow(QWidget *parent = 0);~MainWindow();private:Ui::MainWindow *ui;QPropertyAnimation *m_animationSideWidget; // 设置侧边栏的动画QPropertyAnimation *m_animationBtn; // 设置侧边栏按钮的动画bool m_sideFlag = false; // 侧边栏隐藏/显示的标志位flagprivate 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_OBJECTpublic: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音乐的列表，如图，按钮固定在右下角。