1、需求分析
练习开发一个向导用户界面
-在同一个界面上展现不同的向导页面
- 通过“上一步”和“下一步”按钮进行切换
-不同页面上的元素组件和组件排布都不相同
- 页面中的组件通过布局管理器进行排布
2、解决方案
通过布局嵌套进行界面设计
通过QStackedLayout管理不同的页面
通过子组件的方式生成不同的页面
3、编程实验
向导用户界面 26-1.pro
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>
#include <QDebug>
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 2nd 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 <QtGui/QApplication>
#include "Widget.h"
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
Widget w;
w.show();
return a.exec();
}
注意事项
• 任意容器类的组件都可以指定布局管理器
• 同一个布局管理器中的组件拥有相同的父组件
• 设置布局管理的同时隐式的指定了父子关系
图中组件1和组件2被同一个布局
管理器管理,拥有相同的父组件。
4、小结
布局管理器可以相互嵌套构成复杂用户界面
任意容器组件均可设置布局管理器
同一个布局管理器中的组件拥有相同父组件
组件间的父子关系是Qt中内存管理的重要方式