Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How can i expand and collapse part of my form with QPropertyAnimation



  • Hello guys I want is to show and collapse the groupBox by clicking on the button; so far it works, but i think its not the correct way to do.

    The animation looks very bad when the form is expanded and when it is contracted it is a little more normal.

    #ifndef WIDGET_H
    #define WIDGET_H
    
    #include <QWidget>
    #include <QPropertyAnimation>
    
    QT_BEGIN_NAMESPACE
    namespace Ui { class Widget; }
    QT_END_NAMESPACE
    
    class Widget : public QWidget
    {
        Q_OBJECT
    
    public:
        Widget(QWidget *parent = nullptr);
        ~Widget();
    
    private slots:
        void on_pushButton_clicked();
    
    
    private:
        Ui::Widget *ui;
        QPropertyAnimation *animation;
        bool expand=false;
        int height;
    };
    #endif // WIDGET_H
    
    
    #include "widget.h"
    #include "./ui_widget.h"
    #include <QDebug>
    
    Widget::Widget(QWidget *parent)
        : QWidget(parent), ui(new Ui::Widget)
    {
        ui->setupUi(this);
        ui->pushButton->setText("expand");
        height=this->size().height();
        ui->groupBox->setVisible(false);
    
    
    }
    
    Widget::~Widget()
    {
        delete ui;
    }
    
    
    void Widget::on_pushButton_clicked()
    {
    
        if(!expand){
    
            animation=new QPropertyAnimation(this,"size");
            animation->setDuration(250);
            animation->setEndValue(QSize(this->width(),height));
            animation->setEasingCurve(QEasingCurve::InQuad);
            animation->start();
            ui->groupBox->setVisible(true);
            expand=true;
            ui->pushButton->setText("Shrink");
    
    
        }else{
            ui->groupBox->setVisible(false);
            animation=new QPropertyAnimation(this,"size");
            animation->setDuration(250);
            animation->setEndValue(QSize(this->width(),(height-ui->groupBox->size().height())));
            animation->setEasingCurve(QEasingCurve::InQuad);
            animation->start();
            expand=false;
            ui->pushButton->setText("Expand");
    
    
        }
    
    }
    
    
    

    1b8f327f-e399-499e-b033-bb8502cc36bf-image.png


  • Lifetime Qt Champion

    Hi,

    One issue you have is your reference height. Widgets get an actual size when they are shown not when they are constructed.



  • Anyway, the animation looks very rough, when expanding the form, but when contracting it looks good.





  • Thanks for your answer, I did the example but nothing is shown

    859f68fc-0046-487e-9c3e-948fb1a1e607-image.png

    in action:

    1da0348f-a9fd-456d-834f-8eaf2f08ed3f-image.png

    my code:

    #include "widget.h"
    #include "./ui_widget.h"
    #include "spoiler.h"
    
    Widget::Widget(QWidget *parent)
        : QWidget(parent)
        , ui(new Ui::Widget)
    {
        ui->setupUi(this);
        Spoiler spoiler;
        spoiler.setContentLayout(*ui->groupBox->layout());
    }
    
    Widget::~Widget()
    {
        delete ui;
    }
    
    
    

  • Lifetime Qt Champion

    Spoiler is destroyed as soon as your constructor finishes.


Log in to reply