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