第26课 布局管理器综合实例

1、需求分析

    1.1、 练习开发一个向导用户界面

        1.1.1、在同一个界面上展示不同的向导页面

        1.1.2、 通过“上一步”和“下一步”按钮进行切换

        1.1.3、 不同页面上的元素组件和元素排布都不相同

        1.1.4、 页面中的组件通过布局管理器进行排布

2、解决方案

    2.1、 通过布局嵌套进行界面设计

                

    2.2、 通过QStackedLayout管理不同的页面

                

    2.3、 通过子组件的方式生成不同的方式

            

    2.4、 注意事项

        2.4.1、 任意容器类的组件都可以指定布局管理器

        2.4.2、 同一个布局管理器中的组件拥有相同的父组件！！！

        2.4.3、 设置了布局管理的同时隐式地指定了父子关系

                    

.h头文件

#ifndef WIDGET_H

#define WIDGET_H

#include <QtGui/QWidget>

#include <QPushButton>

#include <QLabel>

#include <QStackedLayout>

#include <QLineEdit>

class Widget : public QWidget

{

    Q_OBJECT

private:

    QLabel label1;

    QLabel label2;

    QLabel label3;

    QLabel label4;

    QLineEdit edit;     //初始化列表顺序和声明顺序不同，会报警告，

    QPushButton preBtn;

    QPushButton nextBtn;

    QStackedLayout sLayout; //定义在这里是为了槽函数方便使用，原来是局部的new在堆空间申请的。

    void initControl();

    QWidget* pageone();//三个页面。

    QWidget* pagetwo();

    QWidget* pagethree();

private slots:

    void onPreBtnClicked();//槽函数，消息处理函数。

    void onNextBtnClicked();

public:

    Widget(QWidget *parent = 0);

    ~Widget();

};

#endif // WIDGET_H

.cpp源文件

#include "widget.h"

#include <QDebug>

#include <QStackedLayout>

#include <QVBoxLayout>

#include <QHBoxLayout>

#include <QGridLayout>

#include <QFormLayout>

Widget::Widget(QWidget *parent)//父组件管理子组件。

    : QWidget(parent), preBtn(this), nextBtn(this),edit(this), label1(this), label2(this), label3(this), label4(this)

{

    initControl();

}

void Widget::initControl()

{

    QVBoxLayout* vLayout = new QVBoxLayout();//1、定义主界面的水平，垂直，栈式布局管理器。

    QHBoxLayout* hLayout = new QHBoxLayout();

    preBtn.setText("Pre Page");

    preBtn.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);//第一个参数水平，第二个参数垂直。

    preBtn.setMinimumSize(160, 30);

    nextBtn.setText("Next Page");

    nextBtn.setMinimumSize(160, 30);

    nextBtn.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);

    //2、将两个按钮添加到水平布局中。

    hLayout->addWidget(&preBtn);

    hLayout->addWidget(&nextBtn);

    //3、实现页面并且添加到栈式管理器

    sLayout.addWidget(pageone());

    sLayout.addWidget(pagetwo());

    sLayout.addWidget(pagethree());

    //4、添加水平和栈式管理器到垂直管理器

    vLayout->addLayout(&sLayout);

    vLayout->addLayout(hLayout);

    //5、设置总的布局管理器

    this->setLayout(vLayout);

    //6连接信号与槽。

    connect(&preBtn, SIGNAL(clicked()), this, SLOT(onPreBtnClicked()));

    connect(&nextBtn, SIGNAL(clicked()), this, SLOT(onNextBtnClicked()));

}

QWidget* Widget::pageone()//三个页面。

{

    QWidget* ret = new QWidget();

    QGridLayout* gLayout = new QGridLayout();

    label1.setText("one");

    label2.setText("two");

    label3.setText("three");

    label4.setText("four");

    gLayout->addWidget(&label1, 0, 0);//这个标签在0行0列，

    gLayout->addWidget(&label2, 0, 1);//这个标签在0行1列，

    gLayout->addWidget(&label3, 1, 0);

    gLayout->addWidget(&label4, 1, 1);

    ret->setLayout(gLayout);//这个widget由GridLayout布局管理器管理

    //说明相同的布局管理器中的组件有相同的父组件。下面是测试代码。

    qDebug() <<"ret = " << ret;

    qDebug() << label1.parent();

    qDebug() << label2.parent();

    qDebug() << label3.parent();

    qDebug() << label4.parent();

    return ret;

}

QWidget* Widget::pagetwo()

{

    QWidget* ret = new QWidget();

    QFormLayout* flayout = new QFormLayout();//表单布局。

    flayout->addRow("Name: ", &edit);//添加标签名，和组件

    ret->setLayout(flayout);//设置布局管理器管理widget

    return ret;

}

QWidget* Widget::pagethree()    //new了一个东西，就要想着给它找个父亲。

{

    QWidget* ret = new QWidget();

    QPushButton* btn1 = new QPushButton("this is");

    QPushButton* btn2 = new QPushButton("a page");

    QVBoxLayout* vlayout = new QVBoxLayout();

    vlayout->addWidget(btn1);

    vlayout->addWidget(btn2);

    ret->setLayout(vlayout);

    return ret;

}

void Widget::onPreBtnClicked()//槽函数，消息处理函数。

{

    //这里一个小技巧，就是 - 1 会变成负数；解决方法： +总数再取余

    int index = ((sLayout.currentIndex() - 1) + sLayout.count()) % sLayout.count();

    sLayout.setCurrentIndex(index);

}

void Widget::onNextBtnClicked()

{//循环取余，防止溢出

    int index = (sLayout.currentIndex() + 1) %sLayout.count();

    sLayout.setCurrentIndex(index);

}

Widget::~Widget()

{

    

}

main.cpp文件

#include <QtGui/QApplication>

#include "widget.h"

int main(int argc, char *argv[])

{

    QApplication a(argc, argv);

    Widget w;

    w.show();

    

    return a.exec();

}

3、小结

    3.1、 布局管理器可以相互嵌套构成复杂的用户界面

    3.2、 任意容器组件均可设置布局管理器

    3.3、 同一个布局管理器中的组件拥有相同的父组件

    3.4、 组件间的父子关系是Qt中内存管理的重要方式