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中内存管理的重要方式