盒子布局

QBoxLayout可以在水平方向或垂直方向上排列控件，分別派生了QHBoxLayout、QVBoxLayout子類。

• QHBoxLayout：水平布局，在水平方向上排列控件，即：左右排列。
• QVBoxLayout：垂直布局，在垂直方向上排列控件，即：上下排列。

水平布局、垂直布局除了構(gòu)造時(shí)的方向（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);

嵌套布局

水平布局會(huì)把所有的控件都顯示在一行上，垂直布局會(huì)把所有控件顯示在一列上,如果要顯示多行(比如登錄界面)，那么就要通過(guò)水平布局和垂直布局之間的嵌套實(shí)現(xiàn)。

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

一行就是一個(gè)水平布局，然后將水平布局嵌入在垂直布局中。

精細(xì)化操作

先來(lái)一組按鈕

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

這一排按鈕和窗口之間有邊距，按鈕和按鈕之間也存在間隙，這些邊距和間隙是可調(diào)節(jié)的。

調(diào)節(jié)邊距

void QLayout::setContentsMargins(int left, int top, int right, int bottom)

hlayout->setContentsMargins(0, 0, 0, 0);

調(diào)節(jié)邊界

void setSpacing(int spacing)

hlayout->setSpacing(0);

拉伸窗口，會(huì)發(fā)現(xiàn)窗口上的按鈕會(huì)隨著窗口的拉伸而變大/變小，如果窗口變大很大，那么這些按鈕是不是就會(huì)很難看。

如果在拉伸的過(guò)程中按鈕的變化是這樣的是不是就很好了。要實(shí)現(xiàn)這個(gè)效果很簡(jiǎn)單，只要添加拉伸空間就可以了。

QHBoxLayout* hlayout = new QHBoxLayout;
hlayout->addStretch();      //添加拉伸空間
hlayout->addWidget(btn1);
...

在第一個(gè)控件之前添加伸縮，這樣所有的控件就會(huì)居右顯示。

在最后一個(gè)控件之后添加伸縮，這樣所有的控件就會(huì)居左顯示。

在第一個(gè)控件之前，最后一個(gè)控件之后添加伸縮，這樣所有的控件就會(huì)居中顯示。

這個(gè)時(shí)候拉伸窗口，你會(huì)發(fā)現(xiàn)窗口上的各個(gè)按鈕的變化是相同的，如果你想讓某些按鈕的變化有些不同可以通過(guò)設(shè)置拉伸系數(shù)來(lái)實(shí)現(xiàn)。

設(shè)置拉伸系數(shù)

bool setStretchFactor(QWidget *widget, int stretch)

bool setStretchFactor(QLayout *layout, int stretch)

hlayout->setStretchFactor(btn2,1);
hlayout->setStretchFactor(btn3,2);

網(wǎng)格布局

柵格布局將位于其中的窗口部件放入一個(gè)網(wǎng)狀的柵格之中。QGridLayout將提供給它的空間劃分成的行和列，并把每個(gè)窗口部件插入并管理到正確的單元格。 柵格布局會(huì)計(jì)算位于其中的空間，然后將它們合理的劃分成若干個(gè)行（row）和列（column），并把每個(gè)由它管理的窗口部件放置在合適的單元之中。

對(duì)于這個(gè)頁(yè)面通過(guò)網(wǎng)格布局進(jìn)行創(chuàng)建，可以劃分成4行4列。一個(gè)控件并不是只能占一個(gè)單元格，而是可以跨行和跨列的。

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號(hào)碼/手機(jī)/   郵箱");passwdEdit->setPlaceholderText("密碼");rememberCheckBox->setText("密碼");  autoLoginCheckBox->setText(動(dòng)登錄");registerBtn->setText("注冊(cè)");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類管理輸入小部件的表單及其關(guān)聯(lián)的標(biāo)簽 以兩列形式布置其子項(xiàng)，左列由標(biāo)簽組成，右列由“字段”小部件（行編輯器、旋轉(zhuǎn)框等）組成。表達(dá)布局的基本單位是行，通常使用的是addRow()函數(shù)。

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)
這個(gè)重載會(huì)在后臺(tái)自動(dòng)創(chuàng)建一個(gè)以labelText作為文本的QLabel。 field被設(shè)置為新的QLabel的伙伴

void addRow(QWidget widget)
void addRow(QLayout layout)

之前用盒子布局中的嵌套結(jié)構(gòu)，制作“用戶名密碼輸入界面，兩行文本編輯框是沒有對(duì)齊的，而如果采用表單布局就不會(huì)這樣。

使用表單布局實(shí)現(xiàn)下面這個(gè)界面

void flayout(){auto usernameEdit = new QLineEdit;auto passwordLab = new QLabel("密 碼");auto passwrodEdit = neQLineEdit;auto mobileEdit = neQLineEdit;auto emailEdit = new QLineEditauto manChx = new QCheckBox("男");auto womanChx = new QCheckBox（"女");flayout->addRow("*用戶名", usernameEdit);flayout->addRow(new QLabel("中文、英文、特殊字  符"));flayout->addRow("*密碼", passwrodEdit);flayout->addRow("*手機(jī)號(hào)碼", mobileEdit);flayout->addRow("電子郵箱", emailEdit);auto hlayout = new QHBoxLayout;hlayout->addWidget(manChx);hlayout->addWidget(womanChx);hlayout->addStretch();flayout->addRow("性別", hlayout);
}

目前的效果是這樣

要想實(shí)現(xiàn)顯示紅色的*以及將字符串 "中文、英文、特殊字符"變小變灰，那么就要使用HTML的標(biāo)簽,對(duì)于顯示在QLabel上的文字，是可以使用一些HTML標(biāo)簽的

void flayout(){auto usernameEdit = new QLineEdit;auto passwordLab = new QLabel("密 碼");auto passwrodEdit = neQLineEdit;auto mobileEdit = neQLineEdit;auto emailEdit = new QLineEditauto 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>手機(jī)號(hào)碼", mobileEdit);flayout->addRow("電子郵箱", emailEdit);auto hlayout = new QHBoxLayout;hlayout->addWidget(manChx);hlayout->addWidget(womanChx);hlayout->addStretch();flayout->addRow("性別", hlayout);
}

堆棧布局

QStackedLayout 用于管理多個(gè)子窗口或頁(yè)面的堆疊顯示。它允許你在一個(gè)固定區(qū)域內(nèi)顯示多個(gè)子窗口，但每次只顯示其中一個(gè)子窗口，其他子窗口被堆疊在后面。

這里通過(guò)堆棧布局管理上文中的網(wǎng)格布局和表單布局，實(shí)現(xiàn)一個(gè)頁(yè)面切換的效果。

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函數(shù)和formlayout函數(shù)

girdlayout(QWidget*page)

原來(lái)這里填的是this，現(xiàn)在改為page就可以了
auto glayout = new QGridLayout(page);

formlayout(QWidget*page)

原來(lái)這里填的是this，現(xiàn)在改為page就可以了
auto flayout = new QFormLayout(page);

void slayout() {
auto btnGroup = new QButtonGro(this);
btnGroup->addButton(new QPushButt("page1"), 0);	//0
btnGroup->addButton(new QPushButt("page2"), 1);	//1auto hlayout = new QHBoxLayout;
hlayout->addWidget(btnGroup->butt(0));
hlayout->addWidget(btnGroup->butt(1));
hlayout->addStretch();//用來(lái)管理多個(gè)頁(yè)面的
auto slayout = new QStackedLayout;
slayout->addWidget(CreatePa(0));	//0
slayout->addWidget(CreatePa(1));	//1auto vlayout = new QVBoxLayout;
vlayout->addLayout(hlayout);
vlayout->addLayout(slayout);setLayout(vlayout);//切換頁(yè)面
qDebug() << slayout->count();connect(btnGroup,QButtonGroup::idClicked, [=](int id){slayout->setCurrentIndex(id);});}