QStackedWidget使用实例
制作一个页面X，该页面X中有两个按钮a，b；和两个页面A，B。要求点击按钮a时，显示页面A。点击按钮b时，显示页面B。
要求按钮位于页面A或B的上方，并且依次由左向右间隔排列。
要求将页面A分为两个子页面A1和A2，将页面B分为两个子页面B1和B2。
可以通过简单的父子关系来实现页面A中的子页面A1和A2，以及页面B中的子页面B1和B2。我们将页面A和页面B分别用垂直布局包含子页面A1、A2和B1、B2。这样，A1、A2和B1、B2会直接显示在页面A和页面B中，而无需额外的点击切换。
以下是完整代码。
目录结构
project/
├── main.cpp
├── MainWindow.h
└── MainWindow.cpp
代码实现
MainWindow.h - 主窗口头文件
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QPushButton>
#include <QStackedWidget>
#include <QWidget>
class MainWindow : public QMainWindow {
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = nullptr);
private:
QPushButton *buttonA; // 按钮a，用于显示页面A
QPushButton *buttonB; // 按钮b，用于显示页面B
QStackedWidget *stackedWidget; // 页面堆叠控件，用于管理页面A和页面B
QWidget *pageA; // 页面A
QWidget *pageB; // 页面B
QWidget *subPageA1; // 页面A的子页面A1
QWidget *subPageA2; // 页面A的子页面A2
QWidget *subPageB1; // 页面B的子页面B1
QWidget *subPageB2; // 页面B的子页面B2
};
#endif // MAINWINDOW_H
MainWindow.cpp - 主窗口实现文件
#include "MainWindow.h"
#include <QVBoxLayout>
#include <QHBoxLayout>
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) {
// 创建中央控件，用于承载所有的子控件
QWidget *centralWidget = new QWidget(this);
setCentralWidget(centralWidget);
// 创建按钮 "a" 和 "b"
buttonA = new QPushButton("Show Page A", this);
buttonB = new QPushButton("Show Page B", this);
// 创建页面A和页面B
pageA = new QWidget(this);
pageB = new QWidget(this);
// 创建页面A的子页面A1和A2
subPageA1 = new QWidget(pageA);
subPageA2 = new QWidget(pageA);
subPageA1->setStyleSheet("background-color: lightcyan;");
subPageA2->setStyleSheet("background-color: lightcoral;");
// 将子页面A1和A2添加到页面A的布局中
QVBoxLayout *pageALayout = new QVBoxLayout(pageA);
pageALayout->addWidget(subPageA1);
pageALayout->addWidget(subPageA2);
// 创建页面B的子页面B1和B2
subPageB1 = new QWidget(pageB);
subPageB2 = new QWidget(pageB);
subPageB1->setStyleSheet("background-color: lightyellow;");
subPageB2->setStyleSheet("background-color: lightpink;");
// 将子页面B1和B2添加到页面B的布局中
QVBoxLayout *pageBLayout = new QVBoxLayout(pageB);
pageBLayout->addWidget(subPageB1);
pageBLayout->addWidget(subPageB2);
// 使用QStackedWidget来存放页面A和页面B
stackedWidget = new QStackedWidget(this);
stackedWidget->addWidget(pageA); // index 0
stackedWidget->addWidget(pageB); // index 1
// 创建一个水平布局用于放置按钮
QHBoxLayout *buttonLayout = new QHBoxLayout();
buttonLayout->addWidget(buttonA);
buttonLayout->addWidget(buttonB);
// 创建一个垂直布局用于整体布局
QVBoxLayout *mainLayout = new QVBoxLayout(centralWidget);
mainLayout->addLayout(buttonLayout); // 将按钮布局添加到主布局的顶部
mainLayout->addWidget(stackedWidget); // 将页面堆叠控件添加到主布局的底部
// 连接按钮和页面切换的槽函数
connect(buttonA, &QPushButton::clicked, this, [=]() {
stackedWidget->setCurrentIndex(0); // 显示页面A
});
connect(buttonB, &QPushButton::clicked, this, [=]() {
stackedWidget->setCurrentIndex(1); // 显示页面B
});
}
main.cpp - 主程序入口
#include <QApplication>
#include "MainWindow.h"
int main(int argc, char *argv[]) {
QApplication app(argc, argv);
MainWindow mainWindow;
mainWindow.setWindowTitle("Page Switcher with Subpages"); // 设置主窗口标题
mainWindow.resize(400, 300); // 设置主窗口大小
mainWindow.show(); // 显示主窗口
return app.exec(); // 启动应用程序事件循环
}
代码说明
- 子页面A1、A2和B1、B2：直接作为页面A和页面B的子控件，通过垂直布局加入各自的页面。
- 布局与页面结构：
QVBoxLayout *pageALayout：用于页面A的垂直布局，将subPageA1和subPageA2加入。QVBoxLayout *pageBLayout：用于页面B的垂直布局，将subPageB1和subPageB2加入。
运行效果
- 程序启动后显示主窗口，顶部有两个按钮“Show Page A”和“Show Page B”。
- 点击“Show Page A”时显示页面A，包括两个子页面A1和A2，背景色分别为淡青色和淡珊瑚色。
- 点击“Show Page B”时显示页面B，包括两个子页面B1和B2，背景色分别为淡黄色和淡粉色。
原文地址：https://blog.csdn.net/qq_38096989/article/details/143532796
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！