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

lincoln

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");


    }

}

SGaist

Hi,

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

lincoln

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

VRonin

Is this what you are looking for? https://stackoverflow.com/questions/32476006/how-to-make-an-expandable-collapsable-section-widget-in-qt

lincoln

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

in action:

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;
}

SGaist

Spoiler is destroyed as soon as your constructor finishes.