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，背景色分别为淡黄色和淡粉色。