盒子布局
QBoxLayout可以在水平方向或垂直方向上排列控件，分别派生了QHBoxLayout、QVBoxLayout子类。
- QHBoxLayout：水平布局，在水平方向上排列控件，即：左右排列。
- QVBoxLayout：垂直布局，在垂直方向上排列控件，即：上下排列。
水平布局、垂直布局除了构造时的方向（LeftToRight、TopToBottom）不同外，其它均相同。
水平布局
auto tiplabel = new QLabel("用户名");
auto lindEdet = new QLineEdit;
auto hlayout = new QHBoxLayout;
hlayout->addWidget(tiplabel);
hlayout->addWidget(lindEdet);
setLayout(hlayout);
垂直布局
auto tiplabel = new QLabel("用户名");
auto lindEdet = new QLineEdit;
auto vlayout = new QVBoxLayout;
vlayout->addWidget(tiplabel);
vlayout->addWidget(lindEdet);
setLayout(vlayout);
嵌套布局
水平布局会把所有的控件都显示在一行上，垂直布局会把所有控件显示在一列上,如果要显示多行(比如登录界面)，那么就要通过水平布局和垂直布局之间的嵌套实现。
auto tiplabel = new QLabel("用户名");
auto lindEdet = new QLineEdit;
auto hlayout = new QHBoxLayout
hlayout->addWidget(tiplabel);
hlayout->addWidget(lindEdet);
auto tiplabel1 = new QLabel("密码");
auto lindEdet1 = new QLineEdit;
auto hlayout1 = new QHBoxLayout;
hlayout1->addWidget(tiplabel1);
hlayout1->addWidget(lindEdet1)
auto vlayout = new QVBoxLayout;
vlayout->addLayout(hlayout);
vlayout->addLayout(hlayout1)
setLayout(vlayout);
一行就是一个水平布局，然后将水平布局嵌入在垂直布局中。
精细化操作
先来一组按钮
QPushButton* btn1 = new QPushButton("One");
QPushButton* btn2 = neQPushButton("Two");
QPushButton* btn3 = neQPushButton("Three");
QPushButton* btn4 = neQPushButton("Four");
QPushButton* btn5 = neQPushButton("Five")
QHBoxLayout* hlayout = neQHBoxLayout;
hlayout->addWidget(btn1);
hlayout->addWidget(btn2);
hlayout->addWidget(btn3);
hlayout->addWidget(btn4);
hlayout->addWidget(btn5)
this->setLayout(hlayout);
这一排按钮和窗口之间有边距，按钮和按钮之间也存在间隙，这些边距和间隙是可调节的。
调节边距
void QLayout::setContentsMargins(int left, int top, int right, int bottom)
hlayout->setContentsMargins(0, 0, 0, 0);
调节边界
void setSpacing(int spacing)
hlayout->setSpacing(0);
拉伸窗口，会发现窗口上的按钮会随着窗口的拉伸而变大/变小，如果窗口变大很大，那么这些按钮是不是就会很难看。
如果在拉伸的过程中按钮的变化是这样的是不是就很好了。要实现这个效果很简单，只要添加拉伸空间就可以了。
QHBoxLayout* hlayout = new QHBoxLayout;
hlayout->addStretch(); //添加拉伸空间
hlayout->addWidget(btn1);
...
在第一个控件之前添加伸缩，这样所有的控件就会居右显示。
在最后一个控件之后添加伸缩，这样所有的控件就会居左显示。
在第一个控件之前，最后一个控件之后添加伸缩，这样所有的控件就会居中显示。
这个时候拉伸窗口，你会发现窗口上的各个按钮的变化是相同的，如果你想让某些按钮的变化有些不同可以通过设置拉伸系数来实现。
设置拉伸系数
bool setStretchFactor(QWidget *widget, int stretch)
bool setStretchFactor(QLayout *layout, int stretch)
hlayout->setStretchFactor(btn2,1);
hlayout->setStretchFactor(btn3,2);
网格布局
栅格布局将位于其中的窗口部件放入一个网状的栅格之中。QGridLayout将提供给它的空间划分成的行和列，并把每个窗口部件插入并管理到正确的单元格。 栅格布局会计算位于其中的空间，然后将它们合理的划分成若干个行（row）和列（column），并把每个由它管理的窗口部件放置在合适的单元之中。
对于这个页面通过网格布局进行创建，可以划分成4行4列。一个控件并不是只能占一个单元格，而是可以跨行和跨列的。
void glayout(){
QLabel* imageLabel = new QLabel;
QLineEdit* userNamaeEdit = new QLineEdit;
QLineEdit* passwdEdit = new QLineEdit;
QCheckBox* rememberCheckBox new QCheckBox;
QCheckBox* autoLoginCheckBox new QCheckBox;
QPushButton* registerBtn = new QPushButton;
QPushButton* forgetBtn = new QPushButton;
QPushButton* loginBtn = new QPushButton;
imageLabel->setFixedSize(90,90);
imageLabel->setPixmap(QPixm(":/Resource/zay. png"));
imageLabel->setScaledConten(true)
userNamaeEdit->setPlaceholderxt("QQ号码/手机/ 邮箱");
passwdEdit->setPlaceholderText("密码");
rememberCheckBox->setText("密码"); autoLoginCheckBox->setText(动登录");
registerBtn->setText("注册");
forgetBtn->setText("找回密码");
loginBtn->setText("登录")
auto glayout = new QGridLayo(this);
glayout->addWidget(imageLabel0, 0, 3, 1);
glayout->addWidg(userNamaeEdit, 0, 1, 1, 2);
glayout->addWidget(passwdEdit1, 1, 1, 2);
glayout->addWidg(rememberCheckBox, 2, 1, 1, 1);
glayout->addWidg(autoLoginCheckBox, 2, 2, 1,1);
glayout->addWidget(loginBtn3, 1, 1, 2);
glayout->addWidg(registerBtn, 0, 3, 1, 1);
glayout->addWidget(forgetBtn1, 3, 1, 1);
}
表单布局
QFormLayout类管理输入小部件的表单及其关联的标签 以两列形式布置其子项，左列由标签组成，右列由“字段”小部件（行编辑器、旋转框等）组成。表达布局的基本单位是行，通常使用的是addRow()函数。
void addRow(QWidget* label,QWidget* field)
void addRow(QWidget* label,QLayout* field)
使用给定的label和field在此表单布局的底部添加新行
void addRow(const QString &labelText, QWidget* field)
void addRow(const QString &labelText, QLayout* field)
这个重载会在后台自动创建一个以labelText作为文本的QLabel。 field被设置为新的QLabel的伙伴
void addRow(QWidget widget)
void addRow(QLayout layout)
之前用盒子布局中的嵌套结构，制作“用户名密码输入界面，两行文本编辑框是没有对齐的，而如果采用表单布局就不会这样。
使用表单布局实现下面这个界面
void flayout(){
auto usernameEdit = new QLineEdit;
auto passwordLab = new QLabel("密 码");
auto passwrodEdit = neQLineEdit;
auto mobileEdit = neQLineEdit;
auto emailEdit = new QLineEdit
auto manChx = new QCheckBox("男");
auto womanChx = new QCheckBox（"女");
flayout->addRow("*用户名", usernameEdit);
flayout->addRow(new QLabel("中文、英文、特殊字 符"));
flayout->addRow("*密码", passwrodEdit);
flayout->addRow("*手机号码", mobileEdit);
flayout->addRow("电子邮箱", emailEdit);
auto hlayout = new QHBoxLayout;
hlayout->addWidget(manChx);
hlayout->addWidget(womanChx);
hlayout->addStretch();
flayout->addRow("性别", hlayout);
}
目前的效果是这样
要想实现显示红色的*以及将字符串 "中文、英文、特殊字符"变小变灰，那么就要使用HTML的标签,对于显示在QLabel上的文字，是可以使用一些HTML标签的
void flayout(){
auto usernameEdit = new QLineEdit;
auto passwordLab = new QLabel("密 码");
auto passwrodEdit = neQLineEdit;
auto mobileEdit = neQLineEdit;
auto emailEdit = new QLineEdit
auto manChx = new QCheckBox("男");
auto womanChx = new QCheckBox（"女");
flayout->addRow("<font color=red size=4>*</ font>用户名", usernameEdit);
flayout->addRow(new QLabel("<font color=gray size=2>中文、英文、特殊字符</ font>"));
flayout->addRow("<font color=red size=4>*</ font>密码", passwrodEdit);
flayout->addRow("<font color=red size=4>*</ font>手机号码", mobileEdit);
flayout->addRow("电子邮箱", emailEdit);
auto hlayout = new QHBoxLayout;
hlayout->addWidget(manChx);
hlayout->addWidget(womanChx);
hlayout->addStretch();
flayout->addRow("性别", hlayout);
}
堆栈布局
QStackedLayout 用于管理多个子窗口或页面的堆叠显示。它允许你在一个固定区域内显示多个子窗口，但每次只显示其中一个子窗口，其他子窗口被堆叠在后面。
这里通过堆栈布局管理上文中的网格布局和表单布局，实现一个页面切换的效果。
static QWidget* CreatePage(int id)
{
if (id == 0)
{
QWidget* page = new QWidget;
gridlayout(page);
return page;
}
else if (id == 1)
{
QWidget* page = new QWidget;
formlayout(page);
return page;
}
return nullptr;
}
这里稍微修改了一下girdlayout函数和formlayout函数
girdlayout(QWidget*page)
原来这里填的是this，现在改为page就可以了
auto glayout = new QGridLayout(page);
formlayout(QWidget*page)
原来这里填的是this，现在改为page就可以了
auto flayout = new QFormLayout(page);文章来源：https://www.toymoban.com/news/detail-739719.html
void slayout() {
auto btnGroup = new QButtonGro(this);
btnGroup->addButton(new QPushButt("page1"), 0); //0
btnGroup->addButton(new QPushButt("page2"), 1); //1
auto hlayout = new QHBoxLayout;
hlayout->addWidget(btnGroup->butt(0));
hlayout->addWidget(btnGroup->butt(1));
hlayout->addStretch();
//用来管理多个页面的
auto slayout = new QStackedLayout;
slayout->addWidget(CreatePa(0)); //0
slayout->addWidget(CreatePa(1)); //1
auto vlayout = new QVBoxLayout;
vlayout->addLayout(hlayout);
vlayout->addLayout(slayout);
setLayout(vlayout);
//切换页面
qDebug() << slayout->count();
connect(btnGroup,QButtonGroup::idClicked, [=](int id)
{
slayout->setCurrentIndex(id);
});
}
文章来源地址https://www.toymoban.com/news/detail-739719.html
到了这里，关于【Qt】盒子布局、网格布局、表单布局和堆栈布局的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
