Qt一伸缩效果

简述

在群里，看到一小伙伴想做一收缩效果。秉着开源，交流，探讨精神（O(∩_∩)）夸过了哈。模仿了一这效果。

效果图

通过对比大家也看到了，黄色区域部分。是可以添加任何控件的，根据自身的需要进行添加自己想要添加的控件。

代码

//这里是主界面ShrinkAnimation.cpp
ShrinkAnimation::ShrinkAnimation(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);
    initControl();
}

ShrinkAnimation::~ShrinkAnimation()
{

}

void ShrinkAnimation::initControl()
{
    ui.titleWidget->setFixedWidth(this->width());
    //这里就是那黄色区域
    StatusWidget* pWidget = new StatusWidget(ui.upWidget);
    pWidget->setFixedSize(this->width(), 48);
    pWidget->move(0, ui.titleWidget->height());
    //点击效果按钮，进行效果展示
    connect(ui.pushButton, &QPushButton::clicked, [this, pWidget](){
    //fixSizeHeight是自定义属性
        QPropertyAnimation *animation = new QPropertyAnimation(ui.upWidget, "fixSizeHeight");
        animation->setDuration(500);
        animation->setEasingCurve(QEasingCurve::InQuad);
        //高于最小高度，代表处于展开状态
        if (ui.upWidget->height() > 32)
        {
            animation->setEndValue(32);
        }
        //否做就是收缩状态
        else
        {
            animation->setEndValue(pWidget->height() + 32);
        }
        animation->start(QAbstractAnimation::DeleteWhenStopped);
    });
}
//这里主要是设置效果按钮的位置
void ShrinkAnimation::resizeEvent(QResizeEvent *)
{
    ui.titleWidget->setFixedWidth(this->width());
    ui.pushButton->move(this->width() - ui.pushButton->width(), 0);
}

//黄色区域代码，添加自己想要添加的控件
StatusWidget::StatusWidget(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);
}

StatusWidget::~StatusWidget()
{

}

void StatusWidget::paintEvent(QPaintEvent* event)
{
    // 背景图
    QStyleOption opt;
    opt.init(this);
    QPainter p(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
    __super::paintEvent(event);
}

//TitleWidget 这里就是自定义属性，设置展开收缩那部分
class TitleWidget : public QWidget
{
    Q_OBJECT
    Q_PROPERTY(int fixSizeHeight READ fixSizeHeight WRITE setCusfixSizeHeight)

public:
    TitleWidget(QWidget *parent = 0);
    ~TitleWidget();

public:
    void setCusfixSizeHeight(int height);
    int  fixSizeHeight();

private:
    Ui::TitleWidget ui;
};

//TitleWidget .cpp
TitleWidget::TitleWidget(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);
}

TitleWidget::~TitleWidget()
{

}

void TitleWidget::setCusfixSizeHeight(int height)
{
    this->setFixedHeight(height);
}

int TitleWidget::fixSizeHeight()
{
    return this->height();
}

主界面UI

结尾

可能有些讲述得不太清楚，没理解的，——可以加我Q，要工程文件——。注意是我工作QQ,很多小伙伴都加我大号。。。。

只为记录，只为分享! 愿所写能对你有所帮助。不忘记点个顶顶支持下，谢谢~