Qt学习26 布局管理综合实例

需求分析

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

解决方案

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

• 通过 QStackedLayout 管理不同的页面

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

编程实验 - 向导用户界面

#ifndef WIDGET_H
#define WIDGET_H

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

class Widget : public QWidget
{
    
    Q_OBJECT
private:
    QStackedLayout sLayout;
    QPushButton preBtn;
    QPushButton nextBtn;
    QLabel fLabel1;
    QLabel fLabel2;
    QLabel fLabel3;
    QLabel fLabel4;
    QLineEdit sEdit;
    QPushButton tBtn1;
    QPushButton tBtn2;
    void initControl();
    QWidget* get1stPage();
    QWidget* get2ndPage();
    QWidget* get3rdPage();
private slots:
    void onPreBtnClicked();
    void onNextBtnClicked();
public:
    Widget(QWidget *parent = 0);
    ~Widget();
};

#endif // WIDGET_H

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

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

Widget::~Widget()
{
    

}

void Widget::initControl()
{
    
    QVBoxLayout* vLayout = new QVBoxLayout();
    QHBoxLayout* hLayout = new QHBoxLayout();
    vLayout->addLayout(&sLayout);
    vLayout->addLayout(hLayout);

    preBtn.setText("pre page");
    preBtn.setMinimumSize(160, 30);
    nextBtn.setText("next page");
    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());

    setLayout(vLayout);
}

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

    QGridLayout* gLayout = new QGridLayout();
    fLabel1.setText("This");
    fLabel2.setText("is");
    fLabel3.setText("1st");
    fLabel4.setText("page");
    gLayout->addWidget(&fLabel1, 0, 0);
    gLayout->addWidget(&fLabel2, 0, 1);
    gLayout->addWidget(&fLabel3, 1, 0);
    gLayout->addWidget(&fLabel4, 1, 1);
    ret->setLayout(gLayout);

    return ret;
}

QWidget *Widget::get2ndPage()
{
    
    QWidget* ret = new QWidget();

    QFormLayout* fLayout = new QFormLayout();
    sEdit.setText("This is 2nd page");
    fLayout->addRow("Hint:", &sEdit);
    ret->setLayout(fLayout);

    return ret;
}

QWidget *Widget::get3rdPage()
{
    
    QWidget* ret = new QWidget();
    QVBoxLayout* vLayout = new QVBoxLayout();
    tBtn1.setText("This is");
    tBtn2.setText("3rd page");
    vLayout->addWidget(&tBtn1);
    vLayout->addWidget(&tBtn2);
    ret->setLayout(vLayout);

    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);
}

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

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

    return a.exec();
}

注意事项

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

• 图中 组件1 和 组件2 被同一个布局管理器管理，拥有相同的父组件。

小结

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