26_布局管理综合实例

关键词：向导用户界面的开发、

1. 需求分析

练习开发一个向导用户界面：
1） 在同一个界面展现不同的向导页面
2） 通过“上一步”和“下一步”按钮进行切换
3） 不同页面上的元素组件和组件布局都不同
4） 页面中的组件通过布局管理器进行排布

2. 解决方案

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

• 通过QStackedLayout管理不同的页面
  

• 通过子组件的方式生成不同的页面

  
  

3. 向导用户界面的实现

Widget.h

#ifndef WIDGET_H
#define WIDGET_H

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

class Widget : public QWidget
{
    Q_OBJECT
private:
    QPushButton preBtn;
    QPushButton nextBtn;
    QLabel fLbl1;
    QLabel fLbl2;
    QLabel fLbl3;
    QLabel fLbl4;
    QLineEdit sLineEdit;
    QPushButton tPushbtn1;
    QPushButton tPushbtn2;
    QStackedLayout sLayout;

    void initControl();
    QWidget* get1stPage();
    QWidget* get2ndPage();
    QWidget* get3rdPage();
private slots:
    void onPreBtnClicked();
    void onNextBtnClicked();
public:
    Widget(QWidget *parent = 0);
    ~Widget();
};

#endif // WIDGET_H

Widget.cpp

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

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    initControl();
}

void Widget::initControl()
{
    QVBoxLayout* vLayout = new QVBoxLayout();
    QHBoxLayout* hLayout = new QHBoxLayout();


    preBtn.setText("Pre page");
    preBtn.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
    preBtn.setMinimumSize(160, 30);

    nextBtn.setText("next page");
    nextBtn.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
    nextBtn.setMinimumSize(160, 30);

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

    hLayout->addWidget(&preBtn);
    hLayout->addWidget(&nextBtn);

    sLayout.addWidget(get1stPage());
    sLayout.addWidget(get2ndPage());
    sLayout.addWidget(get3rdPage());

    vLayout->addLayout(&sLayout);
    vLayout->addLayout(hLayout);

    setLayout(vLayout);
}

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

    fLbl1.setText("This");
    fLbl2.setText("is");
    fLbl3.setText("1st");
    fLbl4.setText("page");

    layout->addWidget(&fLbl1, 0, 0);
    layout->addWidget(&fLbl2, 0, 1);
    layout->addWidget(&fLbl3, 1, 0);
    layout->addWidget(&fLbl4, 1, 1);

    ret->setLayout(layout);

    return ret;
}

QWidget* Widget::get2ndPage()
{
    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 ) + sLayout.count() )
            % sLayout.count();

    sLayout.setCurrentIndex(index);
}

void Widget::onNextBtnClicked()
{
    int index = ( sLayout .currentIndex() + 1 ) % sLayout.count();

    sLayout.setCurrentIndex(index);
}

Widget::~Widget()
{

}

4. 注意事项

• 任意容器类的组件都可以指定布局管理器
• 同一个布局管理器中的组件拥有相同的父组件
• 设置布局管理的同时隐式的指定了父子关系
  

5. 小结

• 布局管理器可以相互嵌套构成复制用户界面
• 任意容器类的组件都可以指定布局管理器
• 同一个布局管理器中的组件拥有相同的父组件
• 组件间的父子关系是Qt中内存管理的重要方式

声明：此文章仅是本人在学习狄泰QT实验分析课程所做的笔记，文章中包含狄泰软件资料内容，一切版权归狄泰软件所有！
实验环境：ubuntu10 + Qt Creator2.4.1 + Qt SDK 4.7.4