Qt中单个窗口中实现多个页面显示

简述

在很多时候我们希望在一个QDialog中或者一个自定义的QWidget中实现多个窗口的实现，以此来实现当功能太多时不局限于每次单独创建其窗口去显示功能模块。下图展示了其效果。

为了实现上图所能够实现的效果，根据博主所了解的可以用两种较为简便和实用的实现方式

• 利用QStackedWidget进行实现
• 利用QTabWidge进行实现

利用QStackedWidget进行实现

首先简述一下QStatckedWidget这个类，官方给出的信息是：
QStackedWidget类提供了一个小部件的堆栈，一次只能看到一个小部件。
QStackedWidget可以用来创建一个类似于QTabWidget提供的用户界面。 这是一个构建在QStackedLayout类之上的便捷布局小部件。

下面给出根据QStackedWidget创建如上图一样的实例代码
首先是头文件

//mywidget.h文件
#ifndef MYWIDGET_H
#define MYWIDGET_H

#include <QtWidgets/QWidget>
#include "ui_mywidget.h"
class QStackedWidget;
class QPushButton;
class MyWidget : public QWidget
{
    Q_OBJECT

public:
    MyWidget(QWidget *parent = 0);
    ~MyWidget();
public slots:
void slt_setPageWidget();//根据所点击的按钮来进行相应widget显示的槽

private:
    Ui::MyWidgetClass ui;
    QStackedWidget *stackWidget;
    QPushButton *pageButton;
    QPushButton *page2Button;
    QPushButton *page3Button;
};

#endif // MYWIDGET_H

下面看一下cpp文件

#include "mywidget.h"
#include <qgridlayout.h>
#include <qlabel.h>
#include <qpushbutton.h>
#include <qstackedwidget.h>
#include <QHBoxLayout>
#include <QVBoxLayout>
MyWidget::MyWidget(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);
    stackWidget = new QStackedWidget;//创建QStackedWidget对象
    //创建几个QPushButton来控制widget的显示
    pageButton = new QPushButton();
    page2Button = new QPushButton();
    page3Button = new QPushButton();
    pageButton->setText(u8"button1");
    page2Button->setText(u8"button2");
    page3Button->setText(u8"button3");
    connect(pageButton, &QPushButton::clicked, this, &MyWidget::slt_setPageWidget);
    connect(page2Button, &QPushButton::clicked, this, &MyWidget::slt_setPageWidget);
    connect(page3Button, &QPushButton::clicked, this, &MyWidget::slt_setPageWidget);
    QWidget *widget[3];//创建三个QWidget对象
    for (int i = 0; i < 3; ++i)//按照下标进行一下QWidget的区分
    {
        widget[i] = new QWidget;
        widget[i]->resize(400, 400);
        QHBoxLayout *layout = new QHBoxLayout;
        for (int j = i; j < 3; ++j)
        {
            QLabel *label = new QLabel();
            label->setText(u8"123");
            layout->addWidget(label);
        }
        widget[i]->setLayout(layout);
        stackWidget->addWidget(widget[i]);
    }
    QVBoxLayout *layout = new QVBoxLayout;
    layout->addWidget(pageButton);
    layout->addWidget(page2Button);
    layout->addWidget(page3Button);
    QHBoxLayout *mainLayout = new QHBoxLayout;
    mainLayout->addLayout(layout);
    mainLayout->addWidget(stackWidget);
    setLayout(mainLayout);
}

void MyWidget::slt_setPageWidget()
{
    //获取触发槽的是哪个部件所发出的信号，并获取到那个指针
    QPushButton *widget = static_cast<QPushButton*>(sender());
    if (widget == pageButton)
    {
        stackWidget->setCurrentIndex(0);//根据触发的按钮来进行所要显示的QWidget
    }
    else if (widget == page2Button)
    {
        stackWidget->setCurrentIndex(1);
    }
    else if (widget == page3Button)
    {
        stackWidget->setCurrentIndex(2);
    }
}
MyWidget::~MyWidget()
{

}

下面是所显示的效果图(用于没有美化，所以界面较简洁）
由于初始 QStackedWidget没有给它设定页面数，默认显示0页面

下图这是点击button2的效果

由此我们可以利用QStackedWidget进行单个窗口中多个页面的显示，其中的QWidget可由我们自定义创建。若想了解更多关于QStackedWidget的信息，可以查看Qt官方文档[点击]
这里也给出几个与QStackedWidget相关的博文
博主：一去丶二三里 Qt之QStackedWidget

博主：SomebodyLuo Qt之布局管理——堆栈窗体QStackedWidget

利用QTabWidge进行实现

同上，我们先来看一下Qt官方对于QTabWidget的介绍：
QTabWidget类提供了一堆标签式小部件。
选项卡小部件提供一个选项卡栏（请参阅QTabBar）和一个“页面区域”，用于显示与每个选项卡相关的页面。 默认情况下，标签栏显示在页面区域上方，但有不同的配置可用（请参见TabPosition）。 每个选项卡都与一个不同的小部件（称为页面）相关联。 只有当前页面显示在页面区域; 所有其他页面都隐藏起来。 用户可以通过单击其选项卡或按Alt +字母快捷键（如果有）来显示不同的页面。

其实关于QTabWidget的介绍，官方文档给出了很多。点击进入Qt官方文档

下面给出利用QTabWidget实现单个窗口中多个页面的例子

int main(int argc, char *argv[])
{

    QApplication a(argc, argv);
    //MyWidget w;
    //w.show();
    QTabWidget tabWidget;//创建QTabWidget对象
    QLabel *label = new QLabel();//创建一个QLabel（QWidget*）
    QLabel *label2 = new QLabel();//
    label2->setText(u8"downdowndown");
    label->setText(u8"upupup");

    tabWidget.addTab(label,"label");//添加页面
    tabWidget.addTab(label2, "label2");
    tabWidget.setTabPosition(QTabWidget::West);//将tabBar的位置放在左边
    tabWidget.show();
    return a.exec();
}

下图为实现效果

要想改变tabBar的文字方向请参考以下博客

博主：skyztttt QTabWidget 改变tabBar位置 并改变文字方向