QStackedWidget 控件 | 码农家园

一、简介

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

2、常用接口函数：

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

3、代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/**** .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_01、PageItem_02所对应的UI，并按照需要来设计好对应的布局。
分别创建PageItem_01、PageItem_02 UI所对应的类文件，并在类文件中实现对应的需求。
在主UI中添加stackedWidget控件，并在对应的文件中添加子控件。
文件结构如下所示：
对应UI文件如下图所示：

2、ProStackedWidget对应代码

头文件ProStackedWidget.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

#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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#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对应代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/**** 头文件 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;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/**** 主程序 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()
{
}

运行结果如下：通过点击按钮来实现切换不同界面