如何在 Qt 中创建动画切换？

Question

我有这样的布局：

要求是当我单击按钮时，detailText 对象的大小将作为动画放大/缩小（两种情况）。

这是我的代码：

#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();
}

这段代码有两个问题：

1. 当detailText不可见时，我点击按钮：整个窗口突然展开，然后detailText出现动画。我需要detailText 的动画使窗口的大小相应变大。或者换句话说，整个窗口的放大和detailText的动画是同步的。

2. 动画仅以一种方式发生：当detailText 不可见时，我单击按钮，detailText 将显示并有动画。但是当detailText可见时，我点击按钮，detailText被隐藏，但没有动画，窗口大小突然缩小。

我应该如何更正我的代码？

我的 *.ui 文件：

<?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>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0//EN&quot; &quot;http://www.w3.org/TR/REC-html40/strict.dtd&quot;&gt;
&lt;html&gt;&lt;head&gt;&lt;meta name=&quot;qrichtext&quot; content=&quot;1&quot; /&gt;&lt;style type=&quot;text/css&quot;&gt;
p, li { white-space: pre-wrap; }
&lt;/style&gt;&lt;/head&gt;&lt;body style=&quot; font-family:'MS Shell Dlg 2'; font-size:8.25pt; font-weight:400; font-style:normal;&quot;&gt;
&lt;p style=&quot; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;detail text. This is the detail text of the intro text.&lt;/p&gt;
&lt;p style=&quot; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;You can see this text when you click onto the button.&lt;/p&gt;
&lt;p style=&quot; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;Lorem Ipsum&lt;/p&gt;
&lt;p style=&quot; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;Blablabla&lt;/p&gt;
&lt;p style=&quot; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;1234&lt;/p&gt;
&lt;p style=&quot; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;5678&lt;/p&gt;
&lt;p style=&quot; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;Hello World&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</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>

Answer 1

我认为逻辑应该改进。如果你的 ui->detailText 是可见的，逻辑上它应该是这样的：

animation->setStartValue( QSize( ui->detailText->width(), ui->detailText->height()));
animation->setEndValue( QSize( ui->detailText->width(), 0));

这是因为如果您的 detailText 可见，您已经将其隐藏，而不是尝试将其缩小为不可见。当它不可见时，您可能应该尝试以下操作：

animation->setStartValue( QSize( ui->detailText->width(), 0));
animation->setEndValue( QSize( ui->detailText->width(), ui->detailText->height()));

换句话说，问题可能是你应该改变你想要动画的小部件的大小，而不是现在。最后，如果您能为您的项目提供 *.ui 文件，我们将不胜感激，这样我们可能能够更好地调试您的代码，并看看应该如何修复它。目前，这是一个有点疯狂的猜测，所以我不能保证它对你有用。