Qt--实现侧边栏

一、效果展示

---

二、原理详解

实现这个隐藏侧边栏的主要思想是侧边栏的显示和隐藏，显示和隐藏只需要移动Widget到可看见的区域（窗口区域）和不可看见的区域（窗口区域之外）即可。可以使用QPropertyAnimation属性动画，绑定Widget的​​geometry​​属性，实现显示和隐藏的动画效果，关键代码如下：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    this->setWindowFlags(Qt::FramelessWindowHint);//去掉标题栏
    set_qss();

    //初始状态，侧边栏隐藏
    side_widget_flag = true;
    ui->side_widget->move(this->rect().width() + ui->side_widget->width(),0);
    propertyAnimation = new QPropertyAnimation(ui->side_widget,"geometry");
    propertyAnimation->setEasingCurve(QEasingCurve::InOutQuint);
    propertyAnimation->setDuration(1000);
}

void MainWindow::mouseDoubleClickEvent(QMouseEvent * event)
{
    Q_UNUSED(event)
    if(side_widget_flag) //侧边栏隐藏状态，显示
    {
        propertyAnimation->setStartValue(QRect(this->rect().width(),0,ui->side_widget->width(),ui->side_widget->height()));
        propertyAnimation->setEndValue(QRect(this->rect().width()-ui->side_widget->width(),0,ui->side_widget->width(),ui->side_widget->height()));
        propertyAnimation->start();
        side_widget_flag = !side_widget_flag;
    }
    else //侧边栏显示状态，隐藏
    {
        propertyAnimation->setStartValue(QRect(this->rect().width()-ui->side_widget->width(),0,ui->side_widget->width(),ui->side_widget->height()));
        propertyAnimation->setEndValue(QRect(this->rect().width(),0,ui->side_widget->width(),ui->side_widget->height()));
        propertyAnimation->start();
        side_widget_flag = !side_widget_flag;
    }
}