当前位置：首页 > news >正文

QStackedWidget使用实例

news 2024/11/6 1:31:58

制作一个页面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_OBJECTpublic:explicit MainWindow(QWidget *parent = nullptr);private:QPushButton *buttonA;            // 按钮a，用于显示页面AQPushButton *buttonB;            // 按钮b，用于显示页面BQStackedWidget *stackedWidget;   // 页面堆叠控件，用于管理页面A和页面BQWidget *pageA;                  // 页面AQWidget *pageB;                  // 页面BQWidget *subPageA1;              // 页面A的子页面A1QWidget *subPageA2;              // 页面A的子页面A2QWidget *subPageB1;              // 页面B的子页面B1QWidget *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和页面BpageA = new QWidget(this);pageB = new QWidget(this);// 创建页面A的子页面A1和A2subPageA1 = 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和B2subPageB1 = 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和页面BstackedWidget = new QStackedWidget(this);stackedWidget->addWidget(pageA); // index 0stackedWidget->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加入。