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 - 主窗口头文件
cpp 复制代码
#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 - 主窗口实现文件
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 - 主程序入口
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的垂直布局,将subPageA1subPageA2加入。
    • QVBoxLayout *pageBLayout:用于页面B的垂直布局,将subPageB1subPageB2加入。

运行效果

  • 程序启动后显示主窗口,顶部有两个按钮"Show Page A"和"Show Page B"。
  • 点击"Show Page A"时显示页面A,包括两个子页面A1和A2,背景色分别为淡青色和淡珊瑚色。
  • 点击"Show Page B"时显示页面B,包括两个子页面B1和B2,背景色分别为淡黄色和淡粉色。
相关推荐
番茄灭世神3 天前
Qt学习笔记第71到80讲
c++·上位机·qt5
沥川同学1 个月前
跨平台应用开发框架(1)----Qt(组件篇)
c++·qt·udp·线程·tcp·qt5·qt6.3
Xam_d_LM1 个月前
【Qt】在 Qt Creator 中使用图片资源方法(含素材网站推荐)
开发语言·c++·qt·ui·贴图·qt5
吃面不喝汤662 个月前
如何为 QSlider 编写 QSS 样式:详细教程
qt5
StruggleRookie3 个月前
ubuntu20.4安装Qt5.15.2
ubuntu·qt5
HelloTonyGo3 个月前
QT5实现https的post请求(QNetworkAccessManager、QNetworkRequest和QNetworkReply)
https·wireshark·ssl·post·qt5
29747860484 个月前
Qt基础类03-直线类QLine
qt·qt5·qline·qlinef·直线类
29747860484 个月前
QT基础之【模块】
模块·module·入门·基础·qt5
yayapoi~4 个月前
qml formLayout实现方式
qt5·qml