Qt学习：多页面切换

用QStackedLayout可以把多个页面放在一起，叠加起来，他会显示第一个添加进去的页面（index0）。然后通过在页面里面发送信号，QStackedLayout::setCurrentIndex可以改变当前要显示的页面的index。

根据此文参数写了一个切换的例子：http://blog.csdn.net/tj807126663/article/details/33738563，在此致谢！

首先，有一个容器类Widget，此类不需要ui，Main来启动此类；

然后，有3个页面，使用设计师界面类，我们直接在ui拖动控件进行测试比较方便。

main：

#include "one.h"
#include <widget.h>
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    return a.exec();
}

widget.h：

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QStackedLayout>
#include <QVBoxLayout>
#include <one.h>
#include <two.h>
#include <three.h>


class Widget : public QWidget
{
    Q_OBJECT
public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

private:
    One *one;
    Two *two;
    Three *three;
    QStackedLayout *stackedLayout;
    QVBoxLayout *mainLayout;
};

#endif // WIDGET_H

widget.cpp:

#include "widget.h"

Widget::Widget(QWidget *parent) : QWidget(parent)
{
    setFixedSize(400,300);
    one = new One;
    two = new Two;
    three = new Three;
    stackedLayout = new QStackedLayout;
    stackedLayout->addWidget(one);
    stackedLayout->addWidget(two);
    stackedLayout->addWidget(three);
    // display传递一个int进来，传递到setCurrentIndex
    connect(one,&One::display,stackedLayout,&QStackedLayout::setCurrentIndex);
    connect(two,&Two::display,stackedLayout,&QStackedLayout::setCurrentIndex);
    connect(three,&Three::display,stackedLayout,&QStackedLayout::setCurrentIndex);

    mainLayout = new QVBoxLayout;
    mainLayout->addLayout(stackedLayout);
    setLayout(mainLayout);
}

Widget::~Widget()
{

}

one.h:

#ifndef ONE_H
#define ONE_H

#include <QWidget>

namespace Ui {
class One;
}

class One : public QWidget
{
    Q_OBJECT

public:
    explicit One(QWidget *parent = 0);
    ~One();
signals:
    void display(int number);
private slots:
    void on_nextBtn_clicked();

private:
    Ui::One *ui;
};

#endif // ONE_H

one.cpp:

#include "one.h"
#include "ui_one.h"


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

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


void One::on_nextBtn_clicked()
{
    display(1);
}

two.h:

#ifndef TWO_H
#define TWO_H

#include <QWidget>

namespace Ui {
class Two;
}

class Two : public QWidget
{
    Q_OBJECT

public:
    explicit Two(QWidget *parent = 0);
    ~Two();
signals:
    void display(int number);

private slots:
    void on_preBtn_clicked();

    void on_nextBtn_clicked();

private:
    Ui::Two *ui;
};

#endif // TWO_H

two.cpp:

#include "two.h"
#include "ui_two.h"


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

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

void Two::on_preBtn_clicked()
{
    display(0);
}

void Two::on_nextBtn_clicked()
{
    display(2);
}

three.h:

#ifndef THREE_H
#define THREE_H

#include <QWidget>

namespace Ui {
class Three;
}

class Three : public QWidget
{
    Q_OBJECT

public:
    explicit Three(QWidget *parent = 0);
    ~Three();
signals:
    void display(int number);

private slots:
    void on_preBtn_clicked();

private:
    Ui::Three *ui;
};

#endif // THREE_H

three.cpp:

#include "three.h"
#include "ui_three.h"

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

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

void Three::on_preBtn_clicked()
{
    display(1);
}

明白一个主旨就是：通过QStackedLayout可以实现多个页面叠加在一起，然后通过setCurrentIndex来切换显示哪一个。

另外一个点是：QStackedLayout本身是一个layout组件，我们可以像添加普通layout那样添加这个组件，那么我们可以实现局部的切换。

(1)测试发现，QStackedLayout和QStackedWidget都是可以使用的，但是使用QStackedLayout在启动的时候会有窗口闪烁的现象，而QStackedWidget没有；

(2)他们添加到父容器的方法有点区别，一个是addLayout，一个是addWidget；

(3)一个layout是没办法直接添加到QStackedLayout或者QStackedWidget的，就像之前做排版布局的经验，要先实例化一个QFrame，然后在Layout的构造函数传入这个QFrame，然后添加到父容器的时候添加这个QFrame就行了，如下：

    // ______________________________首页容器_____________________________

    QFrame * firstPageFrame = new QFrame;

    QVBoxLayout * firstPageLayout = new QVBoxLayout(firstPageFrame);
    firstPageLayout->setMargin(0);
    firstPageLayout->addStretch(5);
    firstPageLayout->addWidget(aboutFrame);
    firstPageLayout->addStretch(25);
    firstPageLayout->addWidget(funcFrame);
    firstPageLayout->addStretch(30);
    firstPageLayout->addWidget(logoFrame);
    firstPageLayout->addWidget(bottomFrame);
    firstPageLayout->addStretch(1);

    // ______________________________页面叠加容器_________________________________
    QStackedLayout * stackedLayout = new QStackedLayout;
    stackedLayout->addWidget(firstPageFrame);

Qt学习：多页面切换

猜你喜欢