C++ QT使用stackwidget实现页面切换（含源码）

0.前言

在QT中一个界面中如何实现页面的切换，而不是新弹出的窗口，这里采用的stackwidget，以层叠widget的方式选定页面索引从而实现页面切换。

1.UI布局

1.1使用stackwidget

首先新建个项目，采用mainwindow和widget均可，主要是展示页面切换的组件，带不带菜单栏都无影响。

在控件当中搜索stackwidget，从而可以拖动设计stackwidget位置，stackwidget右上角便是stackwidget索引切换，默认生成是两个页面，通过左右键切换从而在不同的页面上实现控件管理。
如果想添加页面的话可以在QT designer里面直接添加：

到此为止，我们空白的页面上有了一个stackwidget，里面存放有两个空白的页面，为了方便辨别以及后续的代码化使用，这里针对每个页面摆放了一个按钮和一个标签，如下图所示，并且为了后续使用，对控件进行改名：
目前除了第三个界面依旧为空，其余两个界面均含有label标记。

2.代码方式添加页面实现页面切换

在stackwidget中代码化添加页面的方式也较为简单，步骤为：新建页面->页面上摆好布局及控件->stackwidget加入该页面，使用的话和ui设计页面同理，均为设置stackwidget索引即可。

    QWidget* pageThree = new QWidget();
    QLabel* labelThree = new QLabel(pageThree);
    labelThree->setText("第三个页面");
    // 采用水平布局存放label
    QHBoxLayout *layout = new QHBoxLayout(pageThree);
    layout->addWidget(labelThree);
    layout->setAlignment(Qt::AlignCenter);
    pageThree->setLayout(layout);
    // 新添加的页面默认在最后，索引为2
    ui->stackedWidget->addWidget(pageThree);

3.源码

关于mainWindow.h:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui {
class MainWindow;
}
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;

private slots:
    void onButtonOneClicked();
    void onButtonTwoClicked();
    void onButtonThreeClicked();
};
#endif // MAINWINDOW_H

关于mainWindow.cpp:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QHBoxLayout>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    QWidget* pageThree = new QWidget();
    QLabel* labelThree = new QLabel(pageThree);
    labelThree->setText("第三个页面");
    // 采用水平布局存放label
    QHBoxLayout *layout = new QHBoxLayout(pageThree);
    layout->addWidget(labelThree);
    layout->setAlignment(Qt::AlignCenter);
    pageThree->setLayout(layout);
    // 新添加的页面默认在最后，索引为2
    ui->stackedWidget->addWidget(pageThree);

    connect(ui->pushButtonOne, SIGNAL(clicked()), this, SLOT(onButtonOneClicked()));
    connect(ui->pushButtonTwo, SIGNAL(clicked()), this, SLOT(onButtonTwoClicked()));
    connect(ui->pushButtonThree, SIGNAL(clicked()), this, SLOT(onButtonThreeClicked()));
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::onButtonOneClicked(){
    ui->stackedWidget->setCurrentIndex(0);
}

void MainWindow::onButtonTwoClicked(){
    ui->stackedWidget->setCurrentIndex(1);
}

void MainWindow::onButtonThreeClicked(){
    ui->stackedWidget->setCurrentIndex(2);
}

4.最终效果

stackwidget效果图

我是乐于分享C++、QT、图像处理与深度学习的Credic，是一个在职的C++图像处理软件工程师。如果文章对你有帮助麻烦点个点赞关注收藏哦，你的点赞关注是我最大的动力，持续分享干货中···