Qt--对话框及其类型、布局管理器

一.对话框及其类型

1.对话框是与用户进行简单交互的顶层窗口
2.QDialog是Qt中所有对话框窗口的基类
3.QDialog继承于QWidget是一种容器类的组件

A.QDialog的意义
1.QDialog作为一种专用的交互窗口而存在
2.QDialog不能作为子部件嵌入其它容器中
3.QDialog是定制了窗口样式的特殊的QWidget

a.模态对话框(QDialog::exec())
1.显示后无法于父窗口进行交互
2.是一种阻塞式的对话框调用方式
b.非模态对话框(QDialog::show())
1.显示后独立存在可以同时于父窗口进行交互
2.是一种非阻塞式的对话框调用方式
在一般情况下，模态对话框用于必须依赖用户选择的场合(消息提示，文件选择，打印设置等)，非模态对话框用于特殊功能设置的场合(查找操作，属性设置等)
注意：在栈上创建模态对话框是最简单常用的方式，一般情况下非模态对话框需要在堆上创建，通过QDialog::setModel函数可以创建混合特性的对话框，非模态对话框需要指定Qt::WA_DeleteOnClose属性
B.对话框的返回值
1.只有模态对话框才有返回值的概念
2.模态对话框的返回值用于表示交互结果
3.QDialog::exec()的返回值为交互结果-void QDialog::done(int i)关闭对话框并将参数作为交互结果，QDialog::Accepted--用户操作成功，QDialog::Rejected--用户操作失败
代码示例

Dialog.h
#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QPushButton>

class Dialog : public QDialog
{
    Q_OBJECT
protected:
    QPushButton ModalBtn;
    QPushButton NormalBtn;
    QPushButton MixedBtn;
protected slots:
    void ModalBtn_Clicked();
    void NormalBtn_Clicked();
    void MixedBtn_Clicked();
public:
    Dialog(QWidget *parent = 0);
    ~Dialog();
};

#endif // DIALOG_H

Dialog.cpp
#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QPushButton>

class Dialog : public QDialog
{
    Q_OBJECT
protected:
    QPushButton ModalBtn;
    QPushButton NormalBtn;
    QPushButton MixedBtn;
protected slots:
    void ModalBtn_Clicked();
    void NormalBtn_Clicked();
    void MixedBtn_Clicked();
public:
    Dialog(QWidget *parent = 0);
    ~Dialog();
};

#endif // DIALOG_H

mian.cpp
#include "Dialog.h"
#include <QApplication>
#include <QDebug>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Dialog dlg;
    int r = dlg.exec();

    return r;
}

运行结果

按钮产生的实际结果自己可以运行进行对比

二.Qt中的标准对话框

Qt为开发者提供了一些可复用的对话框类型
Qt提供的可复用对话框全部继承自QDialog类

Qt中的标准对话框遵循相同的使用方式

A.消息对话框
1.消息对话框是应用程序中最常见界面元素
2.消息对话框主要用于--为用户提示重要消息，强制用户进行操作选择
B.消息对话框的使用方式

C.文件对话框
1.Open Mode--应用程序中需要打开一个外部的文件
2.Save Mode--应用程序中需要将当前内容存储于用户指定的外部文件中
文件对话框的使用方式

代码示例

Widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPushButton>

class Widget : public QWidget
{
    Q_OBJECT
private:
    QPushButton SimpleMsgBtn;
    QPushButton CustomMsgBtn;
    QPushButton OpenFileBtn;
    QPushButton SaveFileBtn;
private slots:
    void Simple_clicked();
    void Custom_clicked();
    void Open_clicked();
    void Save_clicked();
public:
    Widget(QWidget *parent = 0);
    ~Widget();
};

#endif // WIDGET_H

Widget.cpp
#include "Widget.h"
#include <QMessageBox>
#include <QDebug>
#include <QFileDialog>

Widget::Widget(QWidget *parent)
    : QWidget(parent),SimpleMsgBtn(this),CustomMsgBtn(this),OpenFileBtn(this),SaveFileBtn(this)
{
    SimpleMsgBtn.setText("Simple Message Dialog");
    SimpleMsgBtn.move(20,20);
    SimpleMsgBtn.resize(160,30);

    CustomMsgBtn.setText("Custom Message Dialog");
    CustomMsgBtn.move(20,70);
    CustomMsgBtn.resize(160,30);//表示大小

    OpenFileBtn.setText("Open Message Dialog");
    OpenFileBtn.move(20,120);
    OpenFileBtn.resize(160,30);

    SaveFileBtn.setText("Save Message Dialog");
    SaveFileBtn.move(20,170);
    SaveFileBtn.resize(160,30);

    resize(200,220);
    setFixedSize(200,220);

    connect(&SimpleMsgBtn,SIGNAL(clicked()),this,SLOT(Simple_clicked()));
    connect(&CustomMsgBtn,SIGNAL(clicked()),this,SLOT(Custom_clicked()));
    connect(&OpenFileBtn,SIGNAL(clicked()),this,SLOT(Open_clicked()));
    connect(&SaveFileBtn,SIGNAL(clicked()),this,SLOT(Save_clicked()));

}

Widget::~Widget()
{

}

void Widget::Simple_clicked()
{
    QMessageBox msg(this);
    msg.setText("mylove");
    msg.exec();
}

void Widget::Custom_clicked()
{
    QMessageBox msg(this);
    msg.setWindowTitle("mylove");
    msg.setText("this is a message dialog");
    msg.setIcon(QMessageBox::Information);
    msg.setStandardButtons(QMessageBox::Ok|QMessageBox::Cancel|QMessageBox::Save);

    if(msg.exec()==QMessageBox::Ok)
    {
        qDebug()<<"OK button is clicked";
    }
}

void Widget::Open_clicked()
{
    QFileDialog dlg(this);
    //可以在帮助文档QMessageBox下找到setAcceptMode与setFileMode的用法
    dlg.setAcceptMode(QFileDialog::AcceptOpen);
    dlg.setFilter(QDir::AllDirs);//setFilter的用法看帮助文档
    dlg.setFileMode(QFileDialog::ExistingFiles);//打开多个存在的文件

    if(dlg.exec()==QFileDialog::Accept)
    {
        QStringList fs=dlg.selectedFiles();
        //for循环将所选择的文件路径打印出来
        for(int i=0;i<fs.count();i++)
        {
            qDebug()<<fs[i];
        }
    }
}

void Widget::Save_clicked()
{
    QFileDialog dlg(this);
    //可以在QMessageBox下找到setAcceptMode的用法
    dlg.setAcceptMode(QFileDialog::AcceptSave);

    if(dlg.exec()==QFileDialog::Accept)
    {
        QStringList fs=dlg.selectedFiles();
        //for循环将所选择的文件路径打印出来
        for(int i=0;i<fs.count();i++)
        {
            qDebug()<<fs[i];
        }
    }
}

mian.cpp
#include "Widget.h"
#include <QApplication>

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

    return a.exec();
}

运行结果及功能实现

D.颜色对话框
Qt中提供了预定义的颜色对话框QColorDialog类
QColorDialog类用于提供指定颜色的对话框部件

颜色对话框的使用方式

1.Qt中QColor类用来在程序中表示颜色的概念
2.QColor类同时支持多种颜色表示方式--RGB:以红绿蓝为基准的三色模式；HSV:以色调、饱和度、明度、为基准的六角锥体模型；CMYK:以天蓝、品红、黑为基准的全彩印刷色彩模型
E.输入对话框
Qt中提供了预定义输入对话框QInputDialog类
QInputDialog类用于需要临时进行数据输入的场合

输入对话框的使用方式

输入对话框的输入模式

代码实现

Widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPushButton>

class Widget : public QWidget
{
    Q_OBJECT
private:
    QPushButton color;
    QPushButton input;
private slots:
    void color_clicked();
    void input_clicked();
public:
    Widget(QWidget *parent = 0);
    ~Widget();
};

#endif // WIDGET_H

main.cpp
#include "Widget.h"
#include <QApplication>

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

    return a.exec();
}

Widget.cpp
#include "Widget.h"
#include <QColorDialog>
#include <QDebug>
#include <QInputDialog>

Widget::Widget(QWidget *parent)
    : QWidget(parent),color(this),input(this)
{
    color.setText("Color Dialog");
    color.resize(100,20);
    color.move(20,20);

    input.setText("Input Dialog");
    input.resize(100,20);
    input.move(20,60);

    resize(150,100);
    setFixedSize(150,100);

    connect(&color,SIGNAL(clicked()),this,SLOT(color_clicked()));
    connect(&input,SIGNAL(clicked()),this,SLOT(input_clicked()));
}

void Widget::color_clicked()
{
    QColorDialog dlg(this);

    dlg.setWindowTitle("Color Edit");
    dlg.setCurrentColor(Qt::red);

    if(dlg.exec()==QColorDialog::Accepted)
    {
        qDebug()<<dlg.selectedColor();
    }
}

void Widget::input_clicked()
{
    QInputDialog dlg(this);

    dlg.setWindowTitle("Input...");
    dlg.setLabelText("Please enter an interger:");
    dlg.setInputMode(QInputDialog::IntInput);
    dlg.setIntMinimum(0);
    dlg.setIntMaximum(255);

    if(dlg.exec()==QInputDialog::Accepted)
    {
        qDebug()<<dlg.intValue();
    }
}

Widget::~Widget()
{

}

运行的结果如图

F.字体对话框
Qt中提供了预定义的字体对话框QFontDialog类
QFontDialog类用于提供选择字体的对话框部件

字体对话框的使用方式

G.进度对话框
Qt提供了预定义的进度对话框QProgressDialog类
QProgressDialog类用于显示进度信息
QProgressDialog类用于需要用户等待的场合

进度对话框的使用方式

H.打印对话框
Qt中提供了预定义的打印对话框QPrintDialog类
QPrintDialog类用于设置打印相关的参数信息

打印对话框的使用方式

Qt中的QPrinter类是打印设备及其参数的封装
QPrinter类封装了系统中打印设备的驱动接口
QPrinter以相同方式使用系统中的不同打印设备
代码示例

Widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPushButton>

class Widget : public QWidget
{
    Q_OBJECT
private:
    QPushButton FontDialogBtn;
    QPushButton ProgressDialogBtn;
    QPushButton PrintDialogBtn;
private slots:
    void FontDialogBtn_Clicked();
    void PrintDialogBtn_Clicked();
    void ProgressDialogBtn_Clicked();
public:
    Widget(QWidget *parent = 0);
    ~Widget();
};

#endif // WIDGET_H

Widget.cpp
#include "Widget.h"
#include <QDebug>
#include <QtPrintSupport/QPrinter>
#include <QPrintDialog>
#include <QTextDocument>
#include <QProgressDialog>
#include <QFontDialog>

Widget::Widget(QWidget *parent) : QWidget(parent),
    FontDialogBtn(this), ProgressDialogBtn(this), PrintDialogBtn(this)
{
    FontDialogBtn.setText("Font Dialog");
    FontDialogBtn.move(20, 20);
    FontDialogBtn.resize(160, 30);

    ProgressDialogBtn.setText("Progress Dialog");
    ProgressDialogBtn.move(20, 70);
    ProgressDialogBtn.resize(160, 30);

    PrintDialogBtn.setText("Print Dialog");
    PrintDialogBtn.move(20, 120);
    PrintDialogBtn.resize(160, 30);

    resize(200, 170);
    setFixedSize(200, 170);

    connect(&FontDialogBtn, SIGNAL(clicked()), this, SLOT(FontDialogBtn_Clicked()));
    connect(&ProgressDialogBtn, SIGNAL(clicked()), this, SLOT(ProgressDialogBtn_Clicked()));
    connect(&PrintDialogBtn, SIGNAL(clicked()), this, SLOT(PrintDialogBtn_Clicked()));
}

void Widget::FontDialogBtn_Clicked()
{
    QFontDialog dlg(this);

    dlg.setWindowTitle("Font Dialog Test");
    dlg.setCurrentFont(QFont("Courier New", 10, QFont::Bold));

    if( dlg.exec() == QFontDialog::Accepted )
    {
        qDebug() << dlg.selectedFont();
    }
}

void Widget::ProgressDialogBtn_Clicked()
{
    QProgressDialog dlg(this);

    dlg.setWindowTitle("Updating...");
    dlg.setLabelText("Downloading update from server...");
    dlg.setMinimum(0);
    dlg.setMaximum(100);
    dlg.setValue(35);

    // create a new thread

    dlg.exec();
}

void Widget::PrintDialogBtn_Clicked()
{
    QPrintDialog dlg(this);

    dlg.setWindowTitle("Print Dialog Test");

    if( dlg.exec() == QPrintDialog::Accepted )
    {
        QPrinter* p = dlg.printer();
        QTextDocument td;

        //td.setPlainText("Printer object test!");
        td.setHtml("<h2>Print html object test</hl>");

        p->setOutputFileName("D:\\test.xps");

        td.print(p);
    }
}

Widget::~Widget()
{

}

main.cpp
#include "Widget.h"
#include <QApplication>

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

    return a.exec();
}

运行结果如图

三.Qt布局管理器

目前的GUI开发方式：绝对定位--直接在像素级指定各个组件的位置和大小void QWidget::move(int x,int y) void QWidget::resize(int w,int h)
存在的问题就是--组件的位置和大小无法自适应父窗口的变化
对此的解决方案--布局管理器：提供相关的类对界面组件进行布局管理，能够自动排列窗口中的界面组件，窗口变化后自动更新界面组件的大小
A.布局管理器
QLayout是Qt中布局管理器的抽象基类，提供继承QLayout实现了功能各异且互补的布局管理器，Qt中可以根据需要自定义布局管理器，布局管理器不是界面部件，而是界面部件的定位策略

B.QBoxLayout布局管理器--以水平或者垂直的方式管理界面组件

布局管理器可以相互嵌套，形成更加复杂的布局方式--布局嵌套几乎可以完成所有常用的界面布局，自定义布局类可以达到个性化界面布局的效果
代码示例

Wiidget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPushButton>

class Widget : public QWidget
{
    Q_OBJECT
private:
    QPushButton TestBtn1;
    QPushButton TestBtn2;
    QPushButton TestBtn3;
    QPushButton TestBtn4;

    void testVBoxLayout();
    void testHBoxLayout();
    void testVHBoxLayout();
public:
    Widget(QWidget *parent = 0);
    ~Widget();
};

#endif // WIDGET_H

Widget.cpp
#include "Widget.h"
#include <QVBoxLayout>

Widget::Widget(QWidget *parent) : QWidget(parent),
    TestBtn1(this), TestBtn2(this), TestBtn3(this), TestBtn4(this)
{

    //testVBoxLayout();
    //testHBoxLayout();
    testVHBoxLayout();
}
//实现水平与垂直随着应用窗口的变化而变化
void Widget::testVHBoxLayout()
{
    QHBoxLayout* hLayout1 = new QHBoxLayout();
    QHBoxLayout* hLayout2 = new QHBoxLayout();
    QVBoxLayout* vLayout = new QVBoxLayout();

    TestBtn1.setText("Test Button 1");
    TestBtn1.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    TestBtn1.setMinimumSize(160, 30);

    TestBtn2.setText("Test Button 2");
    TestBtn2.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    TestBtn2.setMinimumSize(160, 30);

    hLayout1->setSpacing(10);
    hLayout1->addWidget(&TestBtn1);
    hLayout1->addWidget(&TestBtn2);

    TestBtn3.setText("Test Button 3");
    TestBtn3.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    TestBtn3.setMinimumSize(160, 30);

    TestBtn4.setText("Test Button 4");
    TestBtn4.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    TestBtn4.setMinimumSize(160, 30);

    hLayout2->setSpacing(10);//设置的间隔
    hLayout2->addWidget(&TestBtn3);
    hLayout2->addWidget(&TestBtn4);

    vLayout->setSpacing(10);
    vLayout->addLayout(hLayout1);
    vLayout->addLayout(hLayout2);

    setLayout(vLayout);
}
/*
void Widget::testHBoxLayout()
{
    QHBoxLayout* layout = new QHBoxLayout();

    TestBtn1.setText("Test Button 1");
    TestBtn1.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    TestBtn1.setMinimumSize(160, 30);

    TestBtn2.setText("Test Button 2");
    TestBtn2.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    TestBtn2.setMinimumSize(160, 30);

    TestBtn3.setText("Test Button 3");
    TestBtn3.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    TestBtn3.setMinimumSize(160, 30);

    TestBtn4.setText("Test Button 4");
    TestBtn4.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    TestBtn4.setMinimumSize(160, 30);

    layout->setSpacing(30);
    layout->addWidget(&TestBtn1);
    layout->addWidget(&TestBtn2);
    layout->addWidget(&TestBtn3);
    layout->addWidget(&TestBtn4);

    setLayout(layout);
}

void Widget::testVBoxLayout()
{
    QVBoxLayout* layout = new QVBoxLayout();

    TestBtn1.setText("Test Button 1");
    TestBtn1.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    TestBtn1.setMinimumSize(160, 30);

    TestBtn2.setText("Test Button 2");
    TestBtn2.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    TestBtn2.setMinimumSize(160, 30);

    TestBtn3.setText("Test Button 3");
    TestBtn3.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    TestBtn3.setMinimumSize(160, 30);

    TestBtn4.setText("Test Button 4");
    TestBtn4.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    TestBtn4.setMinimumSize(160, 30);

    layout->setSpacing(30);
    layout->addWidget(&TestBtn1);
    layout->addWidget(&TestBtn2);
    layout->addWidget(&TestBtn3);
    layout->addWidget(&TestBtn4);

    setLayout(layout);
}

*/
Widget::~Widget()
{

}

main.cpp
#include "Widget.h"
#include <QApplication>

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

    return a.exec();
}

运行的结果如图所示

C.布局管理器的比例系数
默认情况下以等比例更新组件的大小
可以自定义组件大小更新时的比例系数
QBoxLayout中的比例系数设置

D.QGridLayout布局管理器-以网格的方式管理界面组件

QGridLayout中的比例系数设置

布局管理器的嵌套-QGridLayout支持嵌套其它布局管理器成为其管理对象

代码示例

Widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPushButton>

class Widget : public QWidget
{
    Q_OBJECT
    QPushButton testbtn1;
    QPushButton testbtn2;
    QPushButton testbtn3;
    QPushButton testbtn4;

    void testQGridlayout();

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

#endif // WIDGET_H

Widget.cpp
#include <QGridLayout>

Widget::Widget(QWidget *parent)
    : QWidget(parent),testbtn1(this),testbtn2(this),testbtn3(this),testbtn4(this)
{
    testQGridlayout();
}

Widget::~Widget()
{

}

void Widget::testQGridlayout()
{
    QGridLayout *layout=new QGridLayout();

    testbtn1.setText("btn 1");
    testbtn1.setMinimumSize(160,30);
    testbtn1.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    testbtn2.setText("btn 2");
    testbtn2.setMinimumSize(160,30);
    testbtn2.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    testbtn3.setText("btn 3");
    testbtn3.setMinimumSize(160,30);
    testbtn3.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    testbtn4.setText("btn 4");
    testbtn4.setMinimumSize(160,30);
    testbtn4.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    layout->setSpacing(10);
    //QGridLayout设置行列的效果
    layout->addWidget(&testbtn1,0,0);
    layout->addWidget(&testbtn2,0,1);
    layout->addWidget(&testbtn3,1,0);
    layout->addWidget(&testbtn4,1,1);
    //设置比例因子Row为行  stretch为因子
    layout->setRowStretch(0,1);
    layout->setRowStretch(1,3);

    setLayout(layout);
}

main.cpp
#include "Widget.h"
#include <QApplication>

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

    return a.exec();
}

运行结果如图所示


E.栈式布局管理器
1.所有组件垂直于屏幕的方向上被管理
2.每次只有一个组件会显示在屏幕上
3.只有最顶层的组件会被最终显示

栈式布局管理器的特点
1.组件大小一致且充满组件的显示区
2.不能直接嵌套其它布局管理器
3.能够自由切换需要显示的组件
4.每次能且仅能显示一个组件
QStackedLayout的用法概要

代码实现

Widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPushButton>
#include <QLabel>
#include <QLineEdit>
#include <QStackedLayout>

class Widget : public QWidget
{
    Q_OBJECT
private:
    QPushButton prebtn;//设置的按钮
    QPushButton nextbtn;
    //测试的函数
    void intControl();

    QLabel l1;
    QLabel l2;
    QLabel l3;
    QLabel l4;
    QLineEdit sLineEdit;
    QPushButton tPushBtn1;
    QPushButton tPushBtn2;
    QStackedLayout slayout;
//槽函数的构造
private slots:
    void onPreBtnClicked();
    void onNextBtnClicked();
    //三个QStackedLayout布局的页面
    QWidget* get1stPage();
    QWidget* get2ndPage();
    QWidget* get3rdPage();

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

#endif // WIDGET_H

Widget.cpp
#include "Widget.h"
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QStackedLayout>
#include <QFormLayout>
#include <QGridLayout>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    //构造函数中对intControl()进行调用
    intControl();
}

void Widget::intControl()
{
    QVBoxLayout* vlayout=new QVBoxLayout();
    QHBoxLayout* hlayout=new QHBoxLayout();

    prebtn.setText("Prebtn");
    prebtn.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Fixed);
    prebtn.setMinimumSize(160,30);

    nextbtn.setText("Nextbtn");
    nextbtn.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Fixed);
    nextbtn.setMinimumSize(160,30);

    connect(&prebtn,SIGNAL(clicked()),this,SLOT(onPreBtnClicked()));
    connect(&nextbtn,SIGNAL(clicked()),this,SLOT(onNextBtnClicked()));

    slayout.addWidget(get1stPage());
    slayout.addWidget(get2ndPage());
    slayout.addWidget(get3rdPage());
    //水平布局的两个按钮
    hlayout->addWidget(&prebtn);
    hlayout->addWidget(&nextbtn);
    //在垂直方向上是一个QStackedLayout与QHBoxLayout
    vlayout->addLayout(&slayout);
    vlayout->addLayout(hlayout);
    //对应的槽函数的实现

    setLayout(vlayout);
}

QWidget* Widget::get1stPage()
{
    QWidget* ret=new QWidget();
    QGridLayout* layout=new QGridLayout();

    l1.setText("this");
    l2.setText("is");
    l3.setText("first");
    l4.setText("page");
    //将四个标签进行行列的排列
    layout->addWidget(&l1,0,0);
    layout->addWidget(&l2,0,1);
    layout->addWidget(&l3,1,0);
    layout->addWidget(&l4,1,1);

    ret->setLayout(layout);

    return ret;
}

QWidget* Widget::get2ndPage()
{//QFormLayout表格布局的实现
    QWidget* ret = new QWidget();
    QFormLayout* layout = new QFormLayout();

    sLineEdit.setText("This is 2rd page");

    layout->addRow("Hint:", &sLineEdit);

    ret->setLayout(layout);

    return ret;
}

QWidget* Widget::get3rdPage()
{
    QWidget* ret = new QWidget();
    QVBoxLayout* layout = new QVBoxLayout();

    tPushBtn1.setText("This is");
    tPushBtn2.setText("3rd page");

    layout->addWidget(&tPushBtn1);
    layout->addWidget(&tPushBtn2);

    ret->setLayout(layout);

    return ret;
}

void Widget::onPreBtnClicked()
{
    int index = ((slayout.currentIndex() - 1) + 3) % 3;

    slayout.setCurrentIndex(index);
}

void Widget::onNextBtnClicked()
{//槽函数翻页的实现
    int index = (slayout.currentIndex() + 1) % 3;

    slayout.setCurrentIndex(index);
}

Widget::~Widget()
{

}

main.cpp
#include "Widget.h"
#include <QApplication>

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

    return a.exec();
}

运行结果如图所示