QT常用布局layout快速入门

layout继承图

常用的布局类：

（1）使用水平布局类QHBoxLayout；

（2）使用垂直布局类QVBoxLayout；

（3）使用网格布局类QGridLayout；

（4）使用表格布局类QFormLayout;

代码演示

下面用代码演示用上面的布局类实现下面的窗口效果

下面的代码部分有头文件，源文件，和所有使用函数的效果截图组成

头文件

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

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
	
	// 初始化标签
    void initLabel();
	
	// 初始化输入框
    void initLineEdit();

	// 初始化布局
    void initLayout();
	
	// 初始化按钮
    void initBtn();
protected:
	// 标签
    QLabel *nameLabel;
    QLabel *ageLabel;
    QLabel *emailLabel;
    QLabel *numLabel;
    QLabel *sexLabel;
	
	// 输入框
    QLineEdit *ageLineEdit;
    QLineEdit *nameLineEdit;
    QLineEdit *emailLineEdit;
    QLineEdit *numLineEdit;
	
	// 单选按钮
    QRadioButton *mBtn;
    QRadioButton *wBtn;
    QPushButton *okBtn;
};

源文件

创建基本控件就不做详细解释了，主要关注initLayout()函数里的layout的表现

#include "widget.h"
#include <QFormLayout>
#include <QHBoxLayout>
#include <QVBoxLayout>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
	// 构造函数里逐个调用
    this->initBtn();
    this->initLabel();
    this->initLineEdit();
    this->initLayout();
}

Widget::~Widget()
{
}

void Widget::initLabel()
{
    this->nameLabel = new QLabel("姓名：(&N)");
    this->ageLabel = new QLabel("年龄：(&A)");
    this->emailLabel = new QLabel("邮箱：(&E)");
    this->numLabel = new QLabel("门牌号码：(&N)");

    this->sexLabel = new QLabel("性别");
}

void Widget::initLineEdit()
{
    this->nameLineEdit = new QLineEdit;
    this->ageLineEdit = new QLineEdit;
    this->emailLineEdit = new QLineEdit;
    this->numLineEdit = new QLineEdit;
}

// 初始化布局
void Widget::initLayout()
{
    nameLabel->setBuddy(nameLineEdit);
    ageLabel->setBuddy(ageLineEdit);
    emailLabel->setBuddy(emailLineEdit);
	
	// 创建一个表格类布局
    QFormLayout *headerLayout = new QFormLayout;
	
	// addRow函数字面意思，添加一行，比如addRow(nameLabel,nameLineEdie)，就是把这两个控件放到同一行，图片效果可以划到下面的函数效果演示
    headerLayout->addRow(nameLabel, nameLineEdit);
    headerLayout->addRow(ageLabel,  ageLineEdit);
    headerLayout->addRow(emailLabel, emailLineEdit);
    headerLayout->addRow(numLabel, numLineEdit);

	// 创建水平布局类，意思是横线方向的布局
    QHBoxLayout *sexLayout = new QHBoxLayout;
    sexLayout->addWidget(sexLabel);
    sexLayout->addWidget(mBtn);
    sexLayout->addWidget(wBtn);

    // 空隙
    QSpacerItem *vSpacer = new QSpacerItem(30, 30);
    QSpacerItem *hSpacer = new QSpacerItem(150, 20);

	// 创建水平布局
    QHBoxLayout *okLayout = new QHBoxLayout;
	// 把上面创建的空隙先添加进来
    okLayout->addItem(hSpacer);
    // 把按钮添加到布局
    okLayout->addWidget(okBtn);

	// 创建一个垂直布局，作为主布局，把之前创建的布局都添加到这个布局中
    QVBoxLayout *mainLayout = new QVBoxLayout(this);
    mainLayout->addLayout(headerLayout);
    mainLayout->addLayout(sexLayout);
    mainLayout->addItem(vSpacer);
    mainLayout->addLayout(okLayout);
    mainLayout->setMargin(50);
    mainLayout->setSpacing(10);
	
	// 把垂直布局设置为当前界面的
    this->setLayout(mainLayout);
}

void Widget::initBtn()
{

    this->mBtn = new QRadioButton("男");
    this->wBtn = new QRadioButton("女");
    this->okBtn = new QPushButton("确定");
}

主要函数效果演示

添加一行

addRow(nameLabel, nameLineEdit); //把性别标签和输入框添加为一行

水平布局

    QHBoxLayout *sexLayout = new QHBoxLayout;
    sexLayout->addWidget(sexLabel);	// 性别标签
    sexLayout->addWidget(mBtn);		// ‘男’选项
    sexLayout->addWidget(wBtn);		// ‘女’选项

空隙

    QSpacerItem *hSpacer = new QSpacerItem(150, 20);
    // 创建水平布局
    QHBoxLayout *okLayout = new QHBoxLayout;
	// 把上面创建的空隙先添加进来
    okLayout->addItem(hSpacer);
    // 把按钮添加到布局
    okLayout->addWidget(okBtn);
 

QSpacerItem(150, 20)
创建空隙时的两个参数分别是x，y轴的空隙大小

垂直布局

把之前创建的各个水平布局，添加到垂直布局里，最终就有了下图的效果

 	QVBoxLayout *mainLayout = new QVBoxLayout(this);
    mainLayout->addLayout(headerLayout);
    mainLayout->addLayout(sexLayout);
    mainLayout->addItem(vSpacer);
    mainLayout->addLayout(okLayout);
    mainLayout->setMargin(50);
    mainLayout->setSpacing(10);