Qt5布局管理(三)——QStackedWidget堆栈窗口类

堆栈窗口类QStackedWidget

Code@github:https://github.com/LeeHDsniper/LearnQt/tree/master/CH303

实例效果

这里写图片描述
如上图,堆栈窗口左半部分是一个QListWidget对象,右半部分是分别是三个标签。通过点击左边不同的项目,可以使得右边的Lable进行切换。
具体的结构是这样:
首先这个大的窗口是一个QDialog的派生,这个大窗口包含三个子对象

  • 一个QHBoxLayout布局对象,它将窗口分为左右两部分
  • 一个QListWidget对象,包含三个Item
  • 一个QStackedWidget对象,包含了三个标签对象

代码如下:
stackdlg.h,定义了各个元素

#ifndef STACKDLG_H
#define STACKDLG_H

#include <QDialog>
#include <QListWidget>
#include <QStackedWidget>
#include <QLabel>
class StackDlg : public QDialog
{
    Q_OBJECT

public:
    StackDlg(QWidget *parent = 0);
    ~StackDlg();
private:
    QListWidget *list;
    QStackedWidget *stack;
    QLabel *lable1;
    QLabel *lable2;
    QLabel *lable3;
};

#endif // STACKDLG_H

stackdlg.cpp 具体实现

#include "stackdlg.h"
#include <QHBoxLayout>
StackDlg::StackDlg(QWidget *parent)
    : QDialog(parent)
{
    setWindowTitle(tr("StackedWidget"));
    list=new QListWidget(this);        //新建一个QListWidget控件对象
    list->insertItem(0,tr("Window1"));//在QListWidget中插入三个条目作为选择项
    list->insertItem(1,tr("Window2"));
    list->insertItem(2,tr("Window3"));
    //创建三个QLable标签控件对象,作为堆栈窗口需要显示的三层窗体
    lable1=new QLabel(tr("WindowTest1"));
    lable2=new QLabel(tr("WindowTest2"));
    lable3=new QLabel(tr("WindowTest3"));
    stack=new QStackedWidget(this);//新建一个QStackedWidget堆栈窗体对象
    //将三个QLable标签控件依次插入堆栈窗体中
    stack->addWidget(lable1);
    stack->addWidget(lable2);
    stack->addWidget(lable3);
    QHBoxLayout *mainlayout=new QHBoxLayout(this);
    mainlayout->setMargin(5);
    mainlayout->setSpacing(5);
    mainlayout->addWidget(list);
    mainlayout->addWidget(stack,0,Qt::AlignHCenter);
    mainlayout->setStretchFactor(list,1);
    mainlayout->setStretchFactor(stack,3);
    connect(list,SIGNAL(currentRowChanged(int)),stack,SLOT(setCurrentIndex(int)));
}

StackDlg::~StackDlg()
{

}

重要代码

这个里面的重要代码有两个:
1. mainlayout->setStretchFactor(list,1);
mainlayout->setStretchFactor(stack,3);
这个我在前面的文章中已经讲过:
http://blog.youkuaiyun.com/leehdsniper/article/details/51005149,这里对list和stack的参数为1和3,区别就在于拉伸时的变化率的大小。
2. connect(list,SIGNAL(currentRowChanged(int)),stack,SLOT(setCurrentIndex(int)));
这个连接函数将QListWidget的信号currentRowChange(int)和QStackedWidget的槽setCurrentIndex(int)连接在一起,所以才导致了堆栈窗口的切换。

### 创建具有滑动动画效果的登录和注册界面 为了实现在Qt中创建带有滑动动画效果的登录和注册页面,可以利用`QPropertyAnimation`来控制不同部件之间的切换动画。下面是一个具体的实现方法。 #### 头文件包含 首先,在源文件顶部引入必要的模块: ```cpp #include <QWidget> #include <QPushButton> #include <QStackedWidget> #include <QVBoxLayout> #include <QPropertyAnimation> ``` 这些提供了构建用户界面所需的基础组件以及执行属性动画的功能[^1]。 #### 构建基本布局 定义一个继承自`QWidget`的新,并在其内部设置两个主要部分——登录表单与注册表单。通过`QStackedWidget`管理这两个页面间的转换。 ```cpp class SlideSwitcher : public QWidget { Q_OBJECT public: explicit SlideSwitcher(QWidget *parent = nullptr); private slots: void slideToLogin(); void slideToRegister(); private: QPushButton* loginButton; QPushButton* registerButton; QVBoxLayout* layout; QStackedWidget* stackedWidget; }; ``` 此结构允许以堆栈形式存储多个子窗口小部件并仅显示其中一个作为当前活动项。 #### 实现滑动功能 接下来为上述按钮连接槽函数,当点击相应按钮时触发页面间平滑过渡的效果。 ```cpp SlideSwitcher::SlideSwitcher(QWidget *parent): QWidget(parent), stackedWidget(new QStackedWidget(this)) { // 初始化UI元素... connect(loginButton, SIGNAL(clicked()), this,SLOT(slideToLogin())); connect(registerButton,SIGNAL(clicked()),this,SLOT(slideToRegister())); } void SlideSwitcher::slideToLogin() { int currentIndex = stackedWidget->currentIndex(); if (currentIndex != 0) { // 如果不是已经在第一页,则进行动画处理 QPropertyAnimation *animation = new QPropertyAnimation(stackedWidget,"geometry"); animation->setDuration(500); QRect startRect = stackedWidget->geometry(); // 获取现有位置 animation->setStartValue(startRect.translated(-startRect.width(), 0)); animation->setEndValue(QRect(0, 0, width(), height())); animation->start(); stackedWidget->setCurrentIndex(0); // 切换到目标页码前先改变索引值 } } // 注册页面逻辑似,只需调整参数即可完成对应方向上的移动。 ``` 这里展示了如何基于`QPropertyAnimation`对象配置几何变换过程中的起始状态和结束状态,从而达到视觉上流畅自然的滚动体验。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值