以下是使用 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();
}
代码说明
关键步骤
-
创建子界面:
Page1
和Page2
继承自QWidget
,并在构造函数中设置布局和控件(例如QLabel
)。
-
QStackedWidget 管理子界面:
- 使用
addWidget()
将子界面添加到QStackedWidget
中,每个子界面的索引从 0 开始递增。 - 通过
setCurrentIndex()
切换当前显示的界面。
- 使用
-
切换按钮逻辑:
- 点击按钮时,计算下一个页面的索引(
currentIndex() + 1)% 总数
),实现循环切换。
- 点击按钮时,计算下一个页面的索引(
-
布局管理:
- 使用
QVBoxLayout
将按钮和QStackedWidget
垂直排列。 - 将布局设置到
QWidget
容器中,再将容器设置为主窗口的中央部件。
- 使用
运行效果
- 窗口初始显示
Page1
,内容为 "这是页面 1"。 - 点击按钮后切换到
Page2
,内容为 "这是页面 2"。 - 再次点击按钮回到
Page1
。
扩展功能
- 添加更多页面 :只需创建新的子界面类,并调用
stackedWidget->addWidget(newPage)
。 - 自定义切换动画 :使用
QPropertyAnimation
实现淡入淡出或滑动效果。 - 通过菜单切换 :将按钮替换为
QMenu
或QToolBar
的菜单项。
此代码可直接复制到 Qt 项目中编译运行,确保在 .pro
文件中添加 QT += widgets
。