00. 目錄

文章目錄

• • 00. 目錄
  • 01. 概述
  • 02. 開發(fā)環(huán)境
  • 03. 水平布局常用方式
  • 04. 水平布局常用設(shè)置
  • • 4.1 設(shè)置外邊距
    • 4.2 設(shè)置間距
    • 4.3 添加伸縮空間
    • 4.4 添加控件
    • 4.5 設(shè)置布局方向
    • 4.6 設(shè)置拉伸系數(shù)
  • 05. 垂直布局
  • 06. 附錄

01. 概述

QBoxLayout可以在水平方向或垂直方向上排列控件，由QHBoxLayout、QVBoxLayout所繼承。

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

通過查看源碼，我們可以發(fā)現(xiàn)，水平布局、垂直布局除了構(gòu)造時的方向（LeftToRight、TopToBottom）不同外，其它均相同。

因此我們以QHBoxLayout為例，來講解QBoxLayout的常用功能。

02. 開發(fā)環(huán)境

Windows系統(tǒng)：Windows10

Qt版本：Qt5.15或者Qt6

03. 水平布局常用方式

3.1 第一種方式是使用 Qt 提供的布局，從工具箱中找到相關(guān)的布局，然后將其拖拽到 UI 窗口中

將相應(yīng)的控件放入到布局對應(yīng)的紅色框內(nèi)部，這些控件就按照布局的樣式自動排列了。

除此之外，我們也可以修改當(dāng)前布局，需要先選中當(dāng)前布局，然后鼠標(biāo)右鍵，在右鍵菜單中找布局在其子菜單項(xiàng)中選擇其他布局即可

3.2 第二種方式是直接在父窗口中對選中子部件進(jìn)行布局。可以鼠標(biāo)右擊選擇布局，也可以使用工具欄中的布局工具布局。

3.3 第三種方式：使用代碼進(jìn)行布局

QWidget *window = new QWidget;QPushButton *button1 = new QPushButton("One");QPushButton *button2 = new QPushButton("Two");QPushButton *button3 = new QPushButton("Three");QPushButton *button4 = new QPushButton("Four");QPushButton *button5 = new QPushButton("Five");QHBoxLayout *layout = new QHBoxLayout;layout->addWidget(button1);layout->addWidget(button2);layout->addWidget(button3);layout->addWidget(button4);layout->addWidget(button5);window->setLayout(layout);window->show();

執(zhí)行結(jié)果如下：

04. 水平布局常用設(shè)置

4.1 設(shè)置外邊距

默認(rèn)的外邊距為0，為了美觀性我們可以設(shè)置下Margin。

//設(shè)置外邊距 setMargin(int) setContentsMargins(int left, int top, int right, int bottom); setContentsMargins(const QMargins &margins)setMargin可以設(shè)置左、上、右、下的外邊距，設(shè)置之后，他們的外邊距是相同的。setContentsMargins與其功能相同，但是可以將左、上、右、下的外邊距設(shè)置為不同的值。使用setMargin(10)將外邊距設(shè)置為10。 //設(shè)置外邊距為10layout->setMargin(20);

執(zhí)行結(jié)果如下：

4.2 設(shè)置間距

setSpacing(int) 設(shè)置間距

一般情況下，會有一個默認(rèn)間距值，為了保持所有布局的統(tǒng)一性，或者你需要一個更合適的間距值，則需要手動設(shè)置。

QWidget *window = new QWidget;QPushButton *button1 = new QPushButton("One");QPushButton *button2 = new QPushButton("Two");QPushButton *button3 = new QPushButton("Three");QPushButton *button4 = new QPushButton("Four");QPushButton *button5 = new QPushButton("Five");QHBoxLayout *layout = new QHBoxLayout;layout->addWidget(button1);layout->addWidget(button2);layout->addWidget(button3);layout->addWidget(button4);layout->addWidget(button5);//設(shè)置外邊距為10layout->setMargin(20);//設(shè)置間距為0layout->setSpacing(0);window->setLayout(layout);window->show();

執(zhí)行結(jié)果如下：

4.3 添加伸縮空間

addStretch() 添加了一個伸縮空間（QSpacerItem）。

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

QWidget *window = new QWidget;QPushButton *button1 = new QPushButton("One");QPushButton *button2 = new QPushButton("Two");QPushButton *button3 = new QPushButton("Three");QPushButton *button4 = new QPushButton("Four");QPushButton *button5 = new QPushButton("Five");QHBoxLayout *layout = new QHBoxLayout;//在第一個按鈕之前添加layout->addStretch();layout->addWidget(button1);layout->addWidget(button2);layout->addWidget(button3);layout->addWidget(button4);layout->addWidget(button5);//設(shè)置外邊距為10layout->setMargin(20);//設(shè)置間距為0//layout->setSpacing(0);window->setLayout(layout);window->show();

執(zhí)行結(jié)果：

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

QWidget *window = new QWidget;QPushButton *button1 = new QPushButton("One");QPushButton *button2 = new QPushButton("Two");QPushButton *button3 = new QPushButton("Three");QPushButton *button4 = new QPushButton("Four");QPushButton *button5 = new QPushButton("Five");QHBoxLayout *layout = new QHBoxLayout;layout->addWidget(button1);layout->addWidget(button2);layout->addWidget(button3);layout->addWidget(button4);layout->addWidget(button5);//在最后一個控件添加伸縮layout->addStretch();//設(shè)置外邊距為10layout->setMargin(20);//設(shè)置間距為0//layout->setSpacing(0);window->setLayout(layout);window->show();

執(zhí)行結(jié)果：

在第一個控件之前、最后一個控件之后添加伸縮，這樣所有的控件就會居中顯示。

QWidget *window = new QWidget;QPushButton *button1 = new QPushButton("One");QPushButton *button2 = new QPushButton("Two");QPushButton *button3 = new QPushButton("Three");QPushButton *button4 = new QPushButton("Four");QPushButton *button5 = new QPushButton("Five");QHBoxLayout *layout = new QHBoxLayout;//在第一個按鈕之前添加layout->addStretch();layout->addWidget(button1);layout->addWidget(button2);layout->addWidget(button3);layout->addWidget(button4);layout->addWidget(button5);//在最后一個添加伸縮layout->addStretch();//設(shè)置外邊距為10layout->setMargin(20);//設(shè)置間距為0//layout->setSpacing(0);window->setLayout(layout);window->show();

執(zhí)行結(jié)果

每一個控件之間都添加伸縮，這樣所有的控件之間的間距都會相同。

QWidget *window = new QWidget;QPushButton *button1 = new QPushButton("One");QPushButton *button2 = new QPushButton("Two");QPushButton *button3 = new QPushButton("Three");QPushButton *button4 = new QPushButton("Four");QPushButton *button5 = new QPushButton("Five");QHBoxLayout *layout = new QHBoxLayout;//在第一個按鈕之前添加layout->addStretch();layout->addWidget(button1);layout->addStretch();layout->addWidget(button2);layout->addStretch();layout->addWidget(button3);layout->addStretch();layout->addWidget(button4);layout->addStretch();layout->addWidget(button5);//在最后一個添加伸縮layout->addStretch();//設(shè)置外邊距為10layout->setMargin(20);//設(shè)置間距為0//layout->setSpacing(0);window->setLayout(layout);window->show();

執(zhí)行結(jié)果：

4.4 添加控件

addWidget(QWidget *, int stretch = 0, Qt::Alignment alignment = 0) 默認(rèn)的，我們添加控件至水平布局中，默認(rèn)都是垂直方向居中對齊的。

其中有控件大小不相同的時候就會看得很明顯了，如果我們需要將其中的某些控件居上、居下顯示，那么可以使用對齊方式Qt::Alignment。

QWidget *window = new QWidget;window->resize(320, 128);QPushButton *button1 = new QPushButton("One");QPushButton *button2 = new QPushButton("Two");QPushButton *button3 = new QPushButton("Three");QPushButton *button4 = new QPushButton("Four");QPushButton *button5 = new QPushButton("Five");QHBoxLayout *layout = new QHBoxLayout;//在第一個按鈕之前添加//水平居左 垂直居上layout->addWidget(button1, 0, Qt::AlignLeft | Qt::AlignTop);layout->addWidget(button2, 0, Qt::AlignLeft | Qt::AlignTop);layout->addWidget(button3);//水平居左 垂直居下layout->addWidget(button4, 0, Qt::AlignLeft | Qt::AlignBottom);layout->addWidget(button5, 0, Qt::AlignLeft | Qt::AlignBottom);//設(shè)置外邊距為10layout->setMargin(20);//設(shè)置間距為10layout->setSpacing(10);window->setLayout(layout);window->show();

執(zhí)行結(jié)果：

4.5 設(shè)置布局方向

setDirection(Direction) 設(shè)置布局方向 可以設(shè)置從左到右、從右到左、從上到下、從下到上等。。。setDirection(QBoxLayout::RightToLeft)setDirection(QBoxLayout::TopToBottom);

程序示例：

QWidget *window = new QWidget;window->resize(320, 128);QPushButton *button1 = new QPushButton("One");QPushButton *button2 = new QPushButton("Two");QPushButton *button3 = new QPushButton("Three");QPushButton *button4 = new QPushButton("Four");QPushButton *button5 = new QPushButton("Five");QHBoxLayout *layout = new QHBoxLayout;layout->addWidget(button1);layout->addWidget(button2);layout->addWidget(button3);layout->addWidget(button4);layout->addWidget(button5);//設(shè)置外邊距為10layout->setMargin(20);//設(shè)置間距為10layout->setSpacing(10);//設(shè)置布局方向layout->setDirection(QBoxLayout::TopToBottom);window->setLayout(layout);window->show();

執(zhí)行結(jié)果：

既然使用了QHBoxLayout，一般就不建議使用TopToBottom或者BottomToTop，如果實(shí)在確定不了方向，或者方向可以隨意變化，那么建議使用QBoxLayout。

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

setStretchFactor(QWidget *w, int stretch); setStretchFactor(QLayout *l, int stretch); 設(shè)置控件、布局的拉伸系數(shù) 當(dāng)窗體大小變化時，控件會根據(jù)拉伸系數(shù)來做相應(yīng)的調(diào)整。

setStretchFactor(pButton1, 1);
setStretchFactor(pButton2, 2);

設(shè)置pButton1的拉伸系數(shù)為1，pButton2拉伸系數(shù)為2，當(dāng)窗體變大時，會優(yōu)先將pButton2進(jìn)行拉伸，當(dāng)達(dá)到一定程度時，再拉伸pButton1，pButton1與pButton2的寬度比例為1:2。

程序示例：

QWidget *window = new QWidget;window->resize(320, 128);QPushButton *button1 = new QPushButton("One");QPushButton *button2 = new QPushButton("Two");QPushButton *button3 = new QPushButton("Three");QPushButton *button4 = new QPushButton("Four");QPushButton *button5 = new QPushButton("Five");QHBoxLayout *layout = new QHBoxLayout;layout->addWidget(button1);layout->addWidget(button2);layout->addWidget(button3);layout->addWidget(button4);layout->addWidget(button5);//設(shè)置外邊距為10layout->setMargin(20);//設(shè)置間距為10layout->setSpacing(10);layout->setStretchFactor(button1, 1);layout->setStretchFactor(button2, 2);window->setLayout(layout);window->show();

執(zhí)行結(jié)果：

05. 垂直布局

垂直布局和水平布局除了方向不一樣之外，其余所有的設(shè)置都是一樣。

06. 附錄

6.1 Qt教程匯總
網(wǎng)址：https://dengjin.blog.csdn.net/article/details/115174639

總結(jié)

以上是生活随笔為你收集整理的【Qt】水平和垂直布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。