I have a layout like this:
The requirement is When I click the button, the size of the detailText object will be enlarged/shrunken (BOTH CASES) as an animation.
This is my code:
#include <QPropertyAnimation>
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow)
{
ui->setupUi(this);
ui->detailText->setVisible(false);
connect (ui->button, &QPushButton::clicked, this, &MainWindow::buttonClicked);
}
void MainWindow::buttonClicked()
{
ui->detailText->setVisible(!ui->detailText->isVisible());
ui->detailText->isVisible() ? ui->button->setText( "view less" ) : ui->button->setText( "view more" );
runAnimation();
}
void MainWindow::runAnimation()
{
QPropertyAnimation *animation = new QPropertyAnimation( ui->detailText, "size" );
animation->setDuration( 1250 );
if (ui->detailText->isVisible()) {
animation->setStartValue( QSize( ui->detailText->width(), 0 ) );
animation->setEndValue( QSize( ui->detailText->width(), ui->detailText->height() ) );
}
else {
animation->setStartValue( QSize( ui->detailText->width(), ui->detailText->height() ) );
animation->setEndValue( QSize( ui->detailText->width(), 0 ) );
}
animation->start();
}
With this code, there are two problems:
When the
detailTextis invisible, and I click the button: the whole window is suddenly extended, and then there is animation for thedetailText. I need the animation of thedetailTextmakes the size of window larger accordingly. Or in another word, the enlargement of the whole window and the animation ofdetailTextare synchronized.The animation happens only one way: when
detailTextis invisible, I click the button,detailTextwill be shown and there is animation. But whendetailTextis visible, I click the button, thedetailTextis hidden, but no animation, the size of window is suddenly shrunken.
How should I correct my code?
My *.ui file:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>400</width>
<height>300</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralWidget">
<widget class="QWidget" name="">
<property name="geometry">
<rect>
<x>110</x>
<y>60</y>
<width>201</width>
<height>161</height>
</rect>
</property>
<layout class="QVBoxLayout" name="verticalLayout_2">
<property name="spacing">
<number>0</number>
</property>
<item>
<layout class="QHBoxLayout" name="horizontalLayout">
<item>
<widget class="QLabel" name="incon">
<property name="minimumSize">
<size>
<width>0</width>
<height>0</height>
</size>
</property>
<property name="text">
<string>Icon here</string>
</property>
</widget>
</item>
<item>
<layout class="QVBoxLayout" name="verticalLayout">
<property name="spacing">
<number>0</number>
</property>
<item>
<widget class="QLineEdit" name="introText">
<property name="text">
<string>intro text</string>
</property>
</widget>
</item>
<item>
<widget class="QTextEdit" name="detailText">
<property name="html">
<string><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><meta name="qrichtext" content="1" /><style type="text/css">
p, li { white-space: pre-wrap; }
</style></head><body style=" font-family:'MS Shell Dlg 2'; font-size:8.25pt; font-weight:400; font-style:normal;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">detail text. This is the detail text of the intro text.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">You can see this text when you click onto the button.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Lorem Ipsum</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Blablabla</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">1234</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">5678</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Hello World</p></body></html></string>
</property>
</widget>
</item>
</layout>
</item>
</layout>
</item>
<item>
<widget class="QPushButton" name="button">
<property name="styleSheet">
<string notr="true"/>
</property>
<property name="text">
<string>View more</string>
</property>
</widget>
</item>
</layout>
</widget>
</widget>
<widget class="QMenuBar" name="menuBar">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>400</width>
<height>21</height>
</rect>
</property>
</widget>
<widget class="QToolBar" name="mainToolBar">
<attribute name="toolBarArea">
<enum>TopToolBarArea</enum>
</attribute>
<attribute name="toolBarBreak">
<bool>false</bool>
</attribute>
</widget>
<widget class="QStatusBar" name="statusBar"/>
</widget>
<layoutdefault spacing="6" margin="11"/>
<resources/>
<connections/>
</ui>