Qt介面設計--側邊欄隱藏和滑出

熊來闖一闖發表於2023-01-13
QT
　　在日常專案中，介面佈局上經常使用到側邊欄的方式，在側邊欄放置控制元件進行復合使用，可以實現子功能介面的隱藏和滑出，效果展示如下：

 

　　介面控制元件很簡單，主介面QWidget，側邊欄也用一個QWidget和一個按鈕QPushbutton來進行組合。透過點選按鈕來顯示和隱藏側邊欄。主要用到的是控制元件的move()函式，配合QPropertyAnimation實現動畫效果滑動顯示隱藏。動畫滑出動畫效果使用到的是QPropertyAnimation類的setEasingCurve()函式，透過設定函式引數來實現不同的動畫效果，具體效果可以透過Qt Create的幫助檔案查詢到。

 

 

 

 

 

　　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_propertyAnimation;
    QPropertyAnimation *m_propertyAnimation2;
    bool m_bSideflag = false;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_propertyAnimation = new QPropertyAnimation(ui->widget_side,"geometry");
    m_propertyAnimation->setEasingCurve(QEasingCurve::InOutSine);
    m_propertyAnimation->setDuration(800);
    m_propertyAnimation2 = new QPropertyAnimation(ui->pushButton,"geometry");
    m_propertyAnimation2->setEasingCurve(QEasingCurve::InOutSine);
    m_propertyAnimation2->setDuration(800);
}

MainWindow::~MainWindow()
{
    delete ui;
}void MainWindow::on_pushButton_clicked()
{
    //顯示側邊欄
    if(!m_bSideflag)
    {
        m_propertyAnimation->setStartValue(QRect(-this->rect().width(),0,ui->widget_side->width(),ui->widget_side->height()));
        m_propertyAnimation->setEndValue(QRect(0,0,ui->widget_side->width(),ui->widget_side->height()));
        m_propertyAnimation->start();
        m_propertyAnimation2->setStartValue(QRect(-1,ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height()));
        m_propertyAnimation2->setEndValue(QRect(ui->widget_side->width()-2,ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height()));
        m_propertyAnimation2->start();
        ui->pushButton->setText("<<");
        m_bSideflag = !m_bSideflag;
    }
    else
    {
        m_propertyAnimation->setStartValue(QRect(0,0,ui->widget_side->width(),ui->widget_side->height()));
        m_propertyAnimation->setEndValue(QRect(-this->rect().width(),0,ui->widget_side->width(),ui->widget_side->height()));
        m_propertyAnimation->start();
        m_propertyAnimation2->setStartValue(QRect(ui->widget_side->width()-2,ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height()));
        m_propertyAnimation2->setEndValue(QRect(-1,ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height()));
        m_propertyAnimation2->start();
        ui->pushButton->setText(">>");
        m_bSideflag = !m_bSideflag;
    }
}

　　Qt中動畫效果的功能很強大，初次接觸，還有很多功能需要去不斷摸索，加油!

 

相關文章