[QT]QStackedWidget學習使用 可用於多界面

2017-04-11 01:52:01

根據大牛一去、二三里的教程提示，成功將多個對話框進行切換。

學習教程地址：http://blog.csdn.net/liang19890820/article/details/51614346

 

結果展示：

 

 

 

 

1.新建一個帶ui界面的QWidgetApplication。

2.創建三個dialog；dialog1，dialog2，dialog3，（添加新文件之后選擇QT中的界面類）

分別在對應對話框的qtDesigner中的樣式表進行color設置背景色設置：

dialog1：background-color: rgb(85, 170, 255);

dialog2：background-color: rgb(85, 85, 255);

dialog3:background-color: rgb(85, 85, 127);

 

3.擼代碼開始：

① main.cpp 不需要修改。

② mainwindow.h 中添加

 

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

class QStackedWidget;

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
    void switchPage();
private:
    Ui::MainWindow *ui;
    QStackedWidget *m_pStackedWidget;

};

#endif // MAINWINDOW_H

 

③ mainwindow.cpp中添加

 

#include <QtWidgets>

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include "dialog1.h"
#include "dialog2.h"
#include "dialog3.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
//    QPushButton *pButton = new QPushButton(this);
//    QLabel *pFirstPage= new QLabel(this);
//    QLabel *pSecondPage = new QLabel(this);
//    QLabel *pThirdPage = new QLabel(this);
//    m_pStackedWidget = new QStackedWidget(this);

//    pButton->setText(QStringLiteral("點擊切換"));
//    pFirstPage->setText(QStringLiteral("一去丶二三里"));
//    pSecondPage->setText(QStringLiteral("青春不老，奮斗不止！"));
//    pThirdPage->setText(QStringLiteral("純正開源之美，有趣、好玩、靠譜。。。"));

//    pFirstPage->move(10,100);
//    pSecondPage->move(10,100);
//    pThirdPage->move(10,100);
//    pButton->move(10,100);
//    // 添加頁面（用於切換）
//    m_pStackedWidget->addWidget(pFirstPage);
//    m_pStackedWidget->addWidget(pSecondPage);
//    m_pStackedWidget->addWidget(pThirdPage);

//    m_pStackedWidget->move(10,200);

////    QVBoxLayout *pLayout = new QVBoxLayout();
////    pLayout->addWidget(pButton, 1, Qt::AlignRight | Qt::AlignVCenter);
////    pLayout->addWidget(m_pStackedWidget);
////    pLayout->setSpacing(10);
////    pLayout->setContentsMargins(10, 10, 10, 10);
////    setLayout(pLayout);

//    // 連接切換按鈕信號與槽
//    connect(pButton, &QPushButton::clicked, this, &MainWindow::switchPage);

    QPushButton *pButton = new QPushButton(this);
    m_pStackedWidget = new QStackedWidget(this);

    pButton->setText(QStringLiteral("點擊切換"));
    Dialog1 *dlg1 = new Dialog1(this);
    Dialog2 *dlg2 = new Dialog2(this);
    Dialog3 *dlg3 = new Dialog3(this);
    // 添加頁面（用於切換）
    m_pStackedWidget->addWidget(dlg1);
    m_pStackedWidget->addWidget(dlg2);
    m_pStackedWidget->addWidget(dlg3);
    m_pStackedWidget->move(10,50);
    m_pStackedWidget->resize(200,200);

    connect(pButton,&QPushButton::clicked,this,&MainWindow::switchPage);

}

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

void MainWindow::switchPage()
{
    int count = m_pStackedWidget->count();
    int index = m_pStackedWidget->currentIndex();
    ++index;
    if(index >= count)
    {
        index = 0;
    }
    m_pStackedWidget->setCurrentIndex(index);
}

 其中代碼注釋的部分是教程中的代碼。

 

總結：

1.QStackedWidget需要設置大小和位置，初始的大小比較小，猜想可以使用布局設計器設置大小，這個需要以后驗證，有人驗證的話麻煩請留言告知謝謝。

2.用QStackedWidget進行界面設計感覺比較適合目前雨大的情況，還有其他方式實現多界面切換，請見：http://bbs.csdn.net/topics/350099102；