【QT】一个界面中嵌入其它界面(二)

以下是使用 QStackedWidget 实现动态切换界面的完整代码,包含详细的注释和实现步骤:


完整代码

1. 子界面类:Page1 和 Page2

首先创建两个简单的子界面类,用于嵌入到 QStackedWidget 中。

cpp 复制代码
// Page1.h
#ifndef PAGE1_H
#define PAGE1_H

#include <QWidget>
#include <QLabel>
#include <QVBoxLayout>

class Page1 : public QWidget {
    Q_OBJECT
public:
    explicit Page1(QWidget* parent = nullptr) : QWidget(parent) {
        QLabel* label = new QLabel("这是页面 1", this);
        label->setAlignment(Qt::AlignCenter);

        QVBoxLayout* layout = new QVBoxLayout(this);
        layout->addWidget(label);
        setLayout(layout);
    }
};

#endif // PAGE1_H
cpp 复制代码
// Page2.h
#ifndef PAGE2_H
#define PAGE2_H

#include <QWidget>
#include <QLabel>
#include <QVBoxLayout>

class Page2 : public QWidget {
    Q_OBJECT
public:
    explicit Page2(QWidget* parent = nullptr) : QWidget(parent) {
        QLabel* label = new QLabel("这是页面 2", this);
        label->setAlignment(Qt::AlignCenter);

        QVBoxLayout* layout = new QVBoxLayout(this);
        layout->addWidget(label);
        setLayout(layout);
    }
};

#endif // PAGE2_H

2. 主窗口类:MainWindow

实现主窗口,包含 QStackedWidget 和切换按钮。

cpp 复制代码
// MainWindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QStackedWidget>
#include <QPushButton>
#include <QVBoxLayout>
#include "Page1.h"
#include "Page2.h"

class MainWindow : public QMainWindow {
    Q_OBJECT
public:
    explicit MainWindow(QWidget* parent = nullptr);

private:
    QStackedWidget* stackedWidget;
};

#endif // MAINWINDOW_H
cpp 复制代码
// MainWindow.cpp
#include "MainWindow.h"

MainWindow::MainWindow(QWidget* parent) : QMainWindow(parent) {
    // 1. 创建 QStackedWidget 并添加子界面
    stackedWidget = new QStackedWidget(this);
    Page1* page1 = new Page1(stackedWidget);
    Page2* page2 = new Page2(stackedWidget);
    stackedWidget->addWidget(page1);  // 索引 0
    stackedWidget->addWidget(page2);  // 索引 1

    // 2. 创建切换按钮
    QPushButton* switchButton = new QPushButton("切换页面", this);
    connect(switchButton, &QPushButton::clicked, [=]() {
        // 计算下一个页面的索引(0 或 1)
        int nextIndex = (stackedWidget->currentIndex() + 1) % 2;
        stackedWidget->setCurrentIndex(nextIndex);
    });

    // 3. 布局管理
    QVBoxLayout* layout = new QVBoxLayout();
    layout->addWidget(switchButton);
    layout->addWidget(stackedWidget);

    QWidget* container = new QWidget(this);
    container->setLayout(layout);
    setCentralWidget(container);  // 将容器设置为主窗口的中央部件

    // 4. 窗口属性
    setWindowTitle("QStackedWidget 示例");
    resize(400, 300);
}

3. 主函数:main.cpp

启动应用程序并显示主窗口。

cpp 复制代码
// main.cpp
#include <QApplication>
#include "MainWindow.h"

int main(int argc, char* argv[]) {
    QApplication app(argc, argv);
    MainWindow window;
    window.show();
    return app.exec();
}

代码说明

关键步骤
  1. 创建子界面

    • Page1Page2 继承自 QWidget,并在构造函数中设置布局和控件(例如 QLabel)。
  2. QStackedWidget 管理子界面

    • 使用 addWidget() 将子界面添加到 QStackedWidget 中,每个子界面的索引从 0 开始递增。
    • 通过 setCurrentIndex() 切换当前显示的界面。
  3. 切换按钮逻辑

    • 点击按钮时,计算下一个页面的索引(currentIndex() + 1)% 总数),实现循环切换。
  4. 布局管理

    • 使用 QVBoxLayout 将按钮和 QStackedWidget 垂直排列。
    • 将布局设置到 QWidget 容器中,再将容器设置为主窗口的中央部件。

运行效果

  1. 窗口初始显示 Page1,内容为 "这是页面 1"。
  2. 点击按钮后切换到 Page2,内容为 "这是页面 2"。
  3. 再次点击按钮回到 Page1

扩展功能

  • 添加更多页面 :只需创建新的子界面类,并调用 stackedWidget->addWidget(newPage)
  • 自定义切换动画 :使用 QPropertyAnimation 实现淡入淡出或滑动效果。
  • 通过菜单切换 :将按钮替换为 QMenuQToolBar 的菜单项。

此代码可直接复制到 Qt 项目中编译运行,确保在 .pro 文件中添加 QT += widgets

相关推荐
YOU OU7 小时前
Redis基础常识与命令
数据库·redis·缓存
Scott9999HH7 小时前
【IIoT流量实战】蒸汽管道阀门全关却仍有流量?用 Python 实现涡街信号 FFT 频谱分析与温压全补偿积算网关,深度拆解靠谱的涡街流量计厂家硬核技术标准
开发语言·python
码智社8 小时前
AES加密原理详解及Java实现加解密实战
java·开发语言
AI云海8 小时前
python 列表、元组、集合和字典
开发语言·python
萧瑟余晖9 小时前
JDK 26 新特性详解
java·开发语言
Database_Cool_9 小时前
OLTP 和 OLAP 区别详解:分析型数据库和事务型数据库怎么选(附阿里云 AnalyticDB MySQL 选型指南)
数据库·mysql·阿里云
爱写代码的阿森9 小时前
鸿蒙三方库 | harmony-utils之KvUtil键值型数据库操作详解
数据库·华为·harmonyos·鸿蒙·huawei
马优晨10 小时前
Freemarker 完整讲解(后端 Java 模板引擎)
java·开发语言·freemarker·freemarker 完整讲解·freemarker模板引擎
Database_Cool_10 小时前
单机 MySQL 迁移到分布式数据库方便吗?阿里云 PolarDB-X 100% MySQL 协议兼容零改造平滑迁移
数据库·分布式·mysql