一、简介

1、QStackedWidget 控件相当于一个容器,提供一个空间来存放一系列的控件,并且每次只能有一个控件是可见的,即被设置为当前的控件。

2、常用接口函数:

  • addWidget:向容器中添加控件
  • setCurrentWidget:设置当前显示的控件
  • currentWidget:返回当前的控件
  • removeWidget:删除指定控件
  • count:容器中控件的个数
  • insertWidget:在指定位置上插入指定控件

3、代码示例

/**** .h头文件 ****/
QStackedWidget      *stackedWidget;
QWidget             *widget_01;
QWidget             *widget_02;
QWidget             *widget_03;


/**** 对应.cpp ****/
widget_01 = new QWidget;
widget_02 = new QWidget;
widget_03 = new QWidget;

//创建一个QStackedWidget控件
stackedWidget = new QStackedWidget(this);
stackedWidget->addWidget(widget_01);
stackedWidget->addWidget(widget_02);
stackedWidget->addWidget(widget_03);
//设置当前显示的控件为widget_02
stackedWidget->setCurrentWidget(widget_02);

二、应用

一般用于切换不同控件来进行显示,通过Qt Designer来进行设置比较便捷。
如:通过点击按钮切换到不同的Page中,分为Page01,Page02

1、添加对应文件

  • 创建容器中子控件PageItem_01PageItem_02所对应的UI,并按照需要来设计好对应的布局。
  • 分别创建PageItem_01PageItem_02 UI所对应的类文件,并在类文件中实现对应的需求。
  • 在主UI中添加stackedWidget控件,并在对应的文件中添加子控件。
  • 文件结构如下所示:
  • 在这里插入图片描述
  • 对应UI文件如下图所示:
  • 在这里插入图片描述

2、ProStackedWidget对应代码

  • 头文件ProStackedWidget.h
#pragma once
#include "ui_ProStackedWidget.h"
#include "PageItem_01.h"
#include "PageItem_02.h"
#include <QtWidgets/QWidget>
#include <QStackedWidget>

class ProStackedWidget : public QWidget
{
    Q_OBJECT

public:
    ProStackedWidget(QWidget *parent = Q_NULLPTR);

    void SwitchThePage();

private:
    Ui::ProStackedWidgetClass ui;   
    PageItem_01*              page01;
    PageItem_02*              page02;
};
  • 主程序ProStackedWidget.cpp
#include "ProStackedWidget.h"
#include <QPushButton>

ProStackedWidget::ProStackedWidget(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);

    page01 = new PageItem_01;
    page02 = new PageItem_02;

    ui.stackedWidget->addWidget(page01);
    ui.stackedWidget->addWidget(page02);
     
    ui.stackedWidget->setCurrentWidget(page02);

    connect(ui.pushButton, &QPushButton::clicked, this, &ProStackedWidget::SwitchThePage);

    int tmp = ui.stackedWidget->currentIndex();
}

void ProStackedWidget::SwitchThePage()
{
    if (ui.stackedWidget->currentWidget() == page01)
    {
        ui.stackedWidget->setCurrentWidget(page02);
    }
    else
    {
        ui.stackedWidget->setCurrentWidget(page01);
    }
}

3、PageItem_01对应代码

  • 头文件PageItem_01.h
#pragma once
#include "ui_PageItem_01.h"
#include <QWidget>

class PageItem_01 : public QWidget
{
    Q_OBJECT

public:
    PageItem_01(QWidget *parent=nullptr);
    ~PageItem_01();

private:
    Ui::PageItem_01        ui_01;
};
  • 主程序PageItem_01.cpp
#include "PageItem_01.h"
#include <QLabel>

PageItem_01::PageItem_01(QWidget *parent)
    : QWidget(parent)
{
    ui_01.setupUi(this);

    QLabel* label01 = new QLabel(this);
    label01->setText("This is the page first!");
    label01->setGeometry(200, 400, 400, 50);
}

PageItem_01::~PageItem_01()
{
}

4、PageItem_02对应代码

/**** 头文件 PageItem_02.h *******/
#pragma once
#include "ui_PageItem_02.h"
#include <QWidget>

class PageItem_02 : public QWidget
{
    Q_OBJECT

public:
    PageItem_02(QWidget *parent=nullptr);
    ~PageItem_02();

private:
    Ui::PageItem_02         ui_02;
};

/**** 主程序 PageItem_02.cpp *******/
#include "PageItem_02.h"
#include <QLabel>

PageItem_02::PageItem_02(QWidget *parent) : QWidget(parent)
{
    ui_02.setupUi(this);

    QLabel *label02 = new QLabel(this);
    label02->setText("This is the second page!");
    label02->setGeometry(100, this->height() - 100, 400, 50);
}

PageItem_02::~PageItem_02()
{
}

运行结果如下:通过点击按钮来实现切换不同界面
在这里插入图片描述

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐