qt 实现导航栏切换页面功能 QStackedLayout

 QStackedLayout类提供了多页面切换的布局，一次只能看到一个界面。该类的继承层次结构如下：

（QObject，QLayoutltem） - QLayout - QStackedLayout

构造函数为：

QStackedLayout([QWidget parent])

与QFormLayout一样，不是QWidget类的继承者，因此没有自己的窗口，不能单独使用。 因此，容器作为子控件使用。要在构造函数中指定父组件。如果没有，可将容器作参数，调用父组件的setLayout( )方法。

项目结构：

 项目代码：

#include "widget.h"
#include "ui_widget.h"


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

    //初始化
    stackLayout = new QStackedLayout;

    m_pageOne = new PageOne(ui->widget_2);//加上（）之后才能在当前页切换，不新跳出窗口
    m_pageTwo = new PageTwo(ui->widget_2);//加上（）之后才能在当前页切换，不新跳出窗口
    m_pageThree = new PageThree(ui->widget_2);//加上（）之后才能在当前页切换，不新跳出窗口
//    m_pageOne->setParent(ui->widget_2);
//    m_pageTwo->setParent(ui->widget_2);
//    m_pageThree->setParent(ui->widget_2);

    stackLayout->addWidget(m_pageOne);      //第一页
    stackLayout->addWidget(m_pageTwo);      //第二页
    stackLayout->addWidget(m_pageThree);    //第二页
    stackLayout->setCurrentIndex(0);        //默认stackLayout显示第0页

    ui->widget_2->setLayout(stackLayout);
//    setLayout(stackLayout);//设置唯一布局

    connect(ui->pushButton,SIGNAL(clicked(bool)),this,SLOT(On_PushButton1Result()));
    connect(ui->pushButton_2,SIGNAL(clicked(bool)),this,SLOT(On_PushButton2Result()));
    connect(ui->pushButton_3,SIGNAL(clicked(bool)),this,SLOT(On_PushButton3Result()));
//    ui->widget->raise();
}

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

void Widget::On_PushButton1Result()
{
    //按钮1槽函数
    stackLayout->setCurrentIndex(0);        //切换到stackLayout第一页
    ui->pushButton->setStyleSheet("background-color: rgb(35, 39, 46);color: rgb(255, 255, 255);");
    ui->pushButton_2->setStyleSheet("background-color: rgb(16, 17, 20);color: rgb(154, 160, 177);");
    ui->pushButton_3->setStyleSheet("background-color: rgb(16, 17, 20);color: rgb(154, 160, 177);");
    //m_pageOne->show();//show hide 也可实现
    // widget置于上层
//    ui->widget->raise();
}

void Widget::On_PushButton2Result()
{
    //按钮2槽函数
    stackLayout->setCurrentIndex(1);        //切换到stackLayout第二页
    ui->pushButton->setStyleSheet("background-color: rgb(16, 17, 20);color: rgb(154, 160, 177);");
    ui->pushButton_2->setStyleSheet("background-color: rgb(35, 39, 46);color: rgb(255, 255, 255);");
    ui->pushButton_3->setStyleSheet("background-color: rgb(16, 17, 20);color: rgb(154, 160, 177);");
//    ui->widget->raise();
}

void Widget::On_PushButton3Result()
{
    //按钮3槽函数
    stackLayout->setCurrentIndex(2);        //切换到stackLayout第三页
    ui->pushButton->setStyleSheet("background-color: rgb(16, 17, 20);color: rgb(154, 160, 177);");
    ui->pushButton_2->setStyleSheet("background-color: rgb(16, 17, 20);color: rgb(154, 160, 177);");
    ui->pushButton_3->setStyleSheet("background-color: rgb(35, 39, 46);color: rgb(255, 255, 255);");
//    ui->widget->raise();
}

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QStackedLayout>
#include "pageone.h"
#include "pagetwo.h"
#include "pagethree.h"

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE
class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = 0);
    ~Widget();

private slots:
    void On_PushButton1Result();
    void On_PushButton2Result();
    void On_PushButton3Result();

public:
    Ui::Widget *ui;

private:
    QStackedLayout *stackLayout;
    PageOne *m_pageOne;
    PageTwo *m_pageTwo;
    PageThree *m_pageThree;
};

#endif // WIDGET_H

#include "pageone.h"
#include "ui_pageone.h"

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

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

#ifndef PAGEONE_H
#define PAGEONE_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class PageOne; }
QT_END_NAMESPACE
class PageOne : public QWidget
{
    Q_OBJECT
public:
    explicit PageOne(QWidget *parent = nullptr);
    ~PageOne();

private:
    Ui::PageOne *ui;

};

#endif // PAGEONE_H

 项目预览：

 

Qt布局管理详解（5种布局控件） Qt布局管理详解（5种布局控件）

Qt布局之QStackedLayout