【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

相关推荐
秋916 分钟前
Go语言(Golang)开发工程师全景解析:岗位职责·语言优势与使用场景·各城市薪资·发展前景·高考志愿填报(2026版)
开发语言·golang·高考
睡不醒男孩03082327 分钟前
第七篇:揭秘 PostgreSQL 数据库内核级管控:CLup 深度架构设计与高可用底座技术白皮书
数据库·postgresql·clup
cmes_love1 小时前
Level 2逐笔成交历史数据下载方法笔记
数据库·笔记·oracle
huangdong_1 小时前
1688商品图片采集技术解析:登录态处理与SKU图自动分类
开发语言
chase_my_dream1 小时前
C++ + SLAM 高频面试问题整理
开发语言·c++·面试
swordbob1 小时前
MySQL字符集陷阱:从Oracle迁移踩坑到utf8mb4强制规范
数据库·sql
牛油果子哥q2 小时前
【C++ STL string 】C++ STL string 终极精讲:底层原理、内存机制、全套API、深浅拷贝、易错坑点与工程实战规范
数据库·c++
十五年专注C++开发2 小时前
MySql中各种功能用sql语句实现总结
数据库·sql·mysql
Cloud_Shy6182 小时前
解读《Effective Python 3rd Edition》:从练气到老魔(第五章 Item 30 - 32)
开发语言·人工智能·笔记·python·学习方法
数据库小学妹2 小时前
AI时代数据库怎么选?多模融合、数据统一存储与选型实战指南
数据库·人工智能·经验分享·ai