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

本文连接：https://blog.csdn.net/wjh_init/article/details/78881066
简述
在不少时候咱们但愿在一个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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
下面看一下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()
{

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
下面是所显示的效果图(用于没有美化，因此界面较简洁）
因为初始 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();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
下图为实现效果

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

博主：skyztttt QTabWidget 改变tabBar位置 并改变文字方向 ———————————————— 版权声明：本文为CSDN博主「wjh_init」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处连接及本声明。 原文连接：https://blog.csdn.net/wjh_init/article/details/78881066