第24课 - 布局管理器（QFormLayout和QStackedLayout）

1、思考

如何设计下面的图形用户界面？

解决方案

绝对定位组件的坐标和大小

嵌套QBoxLayout

创建3x2的QGridLayout

2、实例分析

QGridLayout的实现示例 24-1.pro

Widget.cpp

#include "Widget.h"
#include <QLabel>
#include <QLineEdit>
#include <QGridLayout>
#include <QDebug>

Widget::Widget(QWidget *parent) : QWidget(parent, Qt::WindowCloseButtonHint)
{
    QLabel* nameLbl = new QLabel("Name:");
    QLabel* mailLbl = new QLabel("Email:");
    QLabel* addrLbl = new QLabel("Address:");
    QLineEdit* nameEdit = new QLineEdit();
    QLineEdit* mailEdit = new QLineEdit();
    QLineEdit* addrEdit = new QLineEdit();
    QGridLayout* layout = new QGridLayout();

    layout->setSpacing(10);
    layout->addWidget(nameLbl, 0, 0);
    layout->addWidget(nameEdit, 0, 1);
    layout->addWidget(mailLbl, 1, 0);
    layout->addWidget(mailEdit, 1, 1);
    layout->addWidget(addrLbl, 2, 0);
    layout->addWidget(addrEdit,2, 1);
    layout->setColumnStretch(0, 1);
    layout->setColumnStretch(1, 4);

    setLayout(layout);
    setWindowTitle("FTP");
}

Widget::~Widget()
{
    
}

3、布局管理器

QFormLayout布局管理器

－以表单(Form)的方式管理界面组件

－表单布局中的标签和组件是相互对应的关系

QFormlayout的用法概要

- void addRow(QWidget* label, QWidget* field)

- void addRow(QWidget* label, Qlayout* field)

- void addRow(const QString& labelText, QWidget* field)

- void addRow(const QString& labelText, QLayout* field)

表单布局支持嵌套，其它布局管理器可以作为子布局被其管理。

QFormLayout的样式函数

- void setRowWrapPolicy(RowWrapPolicy policy)

- void setlabelAlignment(Qt::Alignment alignment)

布局管理器的嵌套

4、编程实验

QFormLayout的实现示例 24-2.pro

Widget.cpp

#include "Widget.h"
#include <QLineEdit>
#include <QFormLayout>

Widget::Widget(QWidget *parent) : QWidget(parent, Qt::WindowCloseButtonHint)
{
    QLineEdit* nameEdit = new QLineEdit();
    QLineEdit* mailEdit = new QLineEdit();
    QLineEdit* addrEdit = new QLineEdit();
    QFormLayout* layout = new QFormLayout();

    layout->addRow("Name:", nameEdit);
    layout->addRow("Email:", mailEdit);
    layout->addRow("Address:", addrEdit);
    //layout->setRowWrapPolicy(QFormLayout::WrapLongRows);
    //layout->setLabelAlignment(Qt::AlignRight);
    layout->setSpacing(10);

    setLayout(layout);
    setWindowTitle("FTP");
}

Widget::~Widget()
{
    
}

5、最特别的布局管理器

栈式布局管理器(QStackedLayout)

－所有组件在垂直于屏幕的方向上被管理

－每次只有一个组件会显示在屏幕上

- 只有最顶层的组件会被最终显示

栈式布局管理器的特点

- 组件大小一致且充满父组件的显示区

－不能直接嵌套其它布局管理器

－能够自由切换需要显示的组件

－每次能且仅能显示一个组件

QStackedLayout的用法概要

- int addWidget(QWidget* widget)

- QWidget* currentWidget()

- void setCurrentlndex(int index)

- int currentIndex()

6、计时器的概念

计时器是工程开发中非常重要的角色

计时器用于每隔一定的时间触发一个消息

计时器消息最终会被转化为函数调用

宏观上

- 计时器在每个时间间隔会调用指定的函数

计时器(QTimer)的使用方法

1. 编写计时器消息处理函数

2. 在程序中创建计时器对象

3. 连接计时器消息和消息处理函数

4 设置计时器时间间隔并启动计时

7、编程实验

栈式布局初探，计时器的使用 25-1.pro
Widget.h

#ifndef _WIDGET_H_
#define _WIDGET_H_

#include <QtGui/QWidget>
#include <QPushButton>

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

    void initControl();
private slots:
    void timerTimeout();
public:
    Widget(QWidget *parent = 0);
    ~Widget();
};

#endif

Widget.cpp

#include "Widget.h"
#include <QStackedLayout>
#include <QHBoxLayout>
#include <QtCore>
#include <QDebug>

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

void Widget::initControl()
{
    QStackedLayout* sLayout = new QStackedLayout();
    QHBoxLayout* hLayout = new QHBoxLayout();
    QWidget* widget = new QWidget(); //间接嵌套
    QTimer* timer = new QTimer(this);

    TestBtn1.setText("1st Button");
    TestBtn2.setText("2rd Button");
    TestBtn3.setText("3th Button");
    TestBtn4.setText("Test Button 4");

    TestBtn2.setParent(widget);
    TestBtn3.setParent(widget);

    hLayout->addWidget(&TestBtn2);
    hLayout->addWidget(&TestBtn3);

    widget->setLayout(hLayout);

    sLayout->addWidget(&TestBtn1); // 0
    sLayout->addWidget(widget); // 1
    sLayout->addWidget(&TestBtn4); // 2

    sLayout->setCurrentIndex(0);

    setLayout(sLayout);

    connect(timer, SIGNAL(timeout()), this, SLOT(timerTimeout()));

    timer->start(2000);
}

void Widget::timerTimeout()
{
    QStackedLayout* sLayout = dynamic_cast<QStackedLayout*>(layout());//Returns the layout manager that is installed on this widget

    if( sLayout != NULL )
    {
        int index = (sLayout->currentIndex() + 1) % sLayout->count();

        sLayout->setCurrentIndex(index);
    }
}

Widget::~Widget()
{
    
}

main.pp

#include <QtGui/QApplication>
#include "Widget.h"

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

8、小结

QFormLayout以表单的方式管理界面组件

QFormLayout的样式设置简洁明了

QFormLayout支持布局管理器的相互嵌套

QFormLayout是嵌入式产品中最常用的布局方式

QStackedLayout以栈的方式管理界面组件

QStackedLayout中的组件最多只有一个显示

QStackedLayout可以自由切换需要显示的组件

QTimer是Qt中的计时器组件

QTimer能够在指定的时间间隔触发消息

第24课 - 布局管理器（QFormLayout和QStackedLayout）

猜你喜欢