个人技术分享

在之前QT的界面控件中，都是使用绝对定位来完成的，也就是说是用绝对坐标的方式来设置进去的

这样并不方便，因此QT引入了一个布局管理器来解决这个问题

垂直布局

使用QVBoxLayout来管理多个控件

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QVBoxLayout>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 创建三个按钮
    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");

    // 添加布局管理器
    QVBoxLayout* layout = new QVBoxLayout(this);
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
}

Widget::~Widget()
{
    delete ui;
}

此时这三个控件是自动计算位置的

水平布局

使用QHBoxLayout管理控件

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QHBoxLayout>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 创建三个按钮
    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");

    // 添加布局管理器
    QHBoxLayout* layout = new QHBoxLayout(this);
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
}

Widget::~Widget()
{
    delete ui;
}

与上面同理

注意

值得注意的是，在一个布局中只能存在一个layout，但是可以嵌套，否则就失去了自动缩放的功能

网格布局

QT中还提供了QGridLayout来实现网格布局，可以实现出M*N的效果

创建QGridLayout管理四个按钮

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QGridLayout>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 创建三个按钮
    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");
    QPushButton* button4 = new QPushButton("按钮4");

    // 添加布局管理器
    QGridLayout* layout = new QGridLayout(this);
    layout->addWidget(button1, 0, 0);
    layout->addWidget(button2, 0, 1);
    layout->addWidget(button3, 1, 0);
    layout->addWidget(button4, 1, 1);
}

Widget::~Widget()
{
    delete ui;
}

通过修改坐标，可以实现不同的效果：

设置元素的大小比例

可以使用setColumnStretch来设置每一列的拉伸系数

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QGridLayout>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 创建三个按钮
    QPushButton* button1 = new QPushButton("按钮1");
    QPushButton* button2 = new QPushButton("按钮2");
    QPushButton* button3 = new QPushButton("按钮3");
    QPushButton* button4 = new QPushButton("按钮4");

    // 添加布局管理器
    QGridLayout* layout = new QGridLayout(this);
    layout->addWidget(button1, 0, 0);
    layout->addWidget(button2, 1, 1);
    layout->addWidget(button3, 2, 2);
    layout->addWidget(button4, 3, 3);

    layout->setColumnStretch(0, 1);
    layout->setColumnStretch(1, 0);
    layout->setColumnStretch(2, 6);
    layout->setColumnStretch(3, 10);
}

Widget::~Widget()
{
    delete ui;
}

表单布局

#include "widget.h"
#include "ui_widget.h"
#include <QFormLayout>
#include <QLabel>
#include <QPushButton>
#include <QLineEdit>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QFormLayout* layout = new QFormLayout(this);

    QLabel* label1 = new QLabel("姓名");
    QLabel* label2 = new QLabel("年龄");
    QLabel* label3 = new QLabel("电话");

    QLineEdit* lineedit1 = new QLineEdit();
    QLineEdit* lineedit2 = new QLineEdit();
    QLineEdit* lineedit3 = new QLineEdit();

    QPushButton* button = new QPushButton("提交");

    layout->addRow(label1, lineedit1);
    layout->addRow(label2, lineedit2);
    layout->addRow(label3, lineedit3);
    layout->addRow(NULL, button);
}

Widget::~Widget()
{
    delete ui;
}