布局管理就是管理圖形窗口中各個(gè)部件的位置和排列。圖形窗口中的大量部件也需要通過布局管理，對部件進(jìn)行整理分組、排列定位，才能使界面整齊有序、美觀大方。

1. 從絕對定位到布局管理

1.1 什么是布局管理

布局管理就是管理圖形窗口中各個(gè)部件的位置和排列。

網(wǎng)站、報(bào)紙要對發(fā)布的文章設(shè)置欄目、布局管理，使頁面整齊有序、美觀大方。圖形窗口中的大量部件也需要通過布局管理，對部件進(jìn)行整理分組、排列定位，才能使界面友好。

圖形窗口中部件的位置有兩種模式來管理：絕對定位和局部類。

絕對定位就是指定部件相當(dāng)于窗口的位置坐標(biāo) (X,Y) 和部件的高度、寬度。我們在此前文章中的例程，都是直接設(shè)置控件的位置和大小來管理的。

如下圖所示，我們可以在 QtDesigner 右側(cè)下方的 “屬性編輯器” 中編輯按鈕控件的屬性 (X, Y) 設(shè)置控件的位置，編輯屬性寬度、高度設(shè)置控件的大小。

但是，絕對定位模式存在幾個(gè)缺點(diǎn)：

• 用戶改變窗口大小時(shí)，控件的位置和大小并不隨之變化，可能導(dǎo)致部分控件不可見；
• 在不同平臺(tái)運(yùn)行時(shí)的外觀可能不同；
• 修改布局時(shí)需要完全重新編程，非常冗長費(fèi)事。

1.2 Qt 中的布局管理方法

布局類則是使用各種布局方案進(jìn)行布局管理。

PyQt5 提供了四種布局管理器：水平布局、垂直布局、柵格布局和表單布局。

在 QtDesigner 左側(cè)工具欄中，第一組工具 “Layout” 就是布局管理器，分別提供了 4種布局管理的工具按鈕：垂直布局（Vertical Layout）、水平布局（Horizontal Layout）、柵格布局（Grid Layout）和表單布局（Form Layout）。

下文具體介紹 QtDesigner 創(chuàng)建布局方案的使用。

2. 水平布局（Horizontal Layout）

水平布局將多個(gè)控件在水平方向排列，控件之間的間隔相同。

QtDesigner 創(chuàng)建水平布局有兩種使用方法：方法一是先創(chuàng)建水平布局中的各個(gè)控件，然后將控件加入水平布局；方法二是先創(chuàng)建一個(gè)水平布局，再在該水平布局內(nèi)依次創(chuàng)建各個(gè)控件。

以方法一為例創(chuàng)建水平布局：

• 先在窗口中創(chuàng)建幾個(gè)按鈕控件，控件位置可以任意布置，圖形窗口顯示與上圖絕對定位時(shí)類似；
• 點(diǎn)擊鼠標(biāo)左鍵并拖拽拉伸，全部選中創(chuàng)建的幾個(gè)按鈕控件，此時(shí)每個(gè)按鈕控件周圍都出現(xiàn)定位小方塊，這些按鈕控件都處于選中狀態(tài)；
• 點(diǎn)擊鼠標(biāo)右鍵，喚出下拉菜單，選擇 “布局” -> “水平布局” 選項(xiàng)；或者直接按 “Ctrl+1” 快捷鍵，就為選中的控件創(chuàng)建了一個(gè)水平布局。

添加到水平布局框中的控件，其大小和位置是由水平布局框自動(dòng)設(shè)置的。布局框中控件的大小和位置屬性，不能在 “屬性編輯器” 中直接進(jìn)行編輯修改。

如果自動(dòng)布局的按鈕位置不合適，可以在布局框中添加間隔控制器 “Horizontal Spacer”，以調(diào)整按鈕控件的間隔。

如下圖所示，在上方的水平布局框中，多個(gè)按鈕控件在水平方向排列，控件之間的間隔相同。在下方的水平布局框的頂部和底部分別添加了一個(gè)間隔控制器，將按鈕控件調(diào)整到所需的位置。

3. 垂直布局（Vertical Layout）

垂直布局將多個(gè)控件在垂直方向排列，控件之間的間隔相同。

與水平布局類似，QtDesigner 創(chuàng)建垂直布局有兩種使用方法：方法一是先創(chuàng)建垂直布局中的各個(gè)控件，然后將控件加入垂直布局；方法二是先創(chuàng)建一個(gè)垂直布局，再在該垂直布局內(nèi)依次創(chuàng)建各個(gè)控件。

以方法二為例創(chuàng)建垂直布局：

• 在 QtDesigner 左側(cè)工具欄的 “Layout” 類中，鼠標(biāo)點(diǎn)擊選擇垂直布局按鈕 “Vertical Layout” 后，將其拖動(dòng)至中間的圖形窗口內(nèi)；
• 此時(shí)在圖形窗口中出現(xiàn)一個(gè)紅色直線矩形框，表示所創(chuàng)建的垂直布局框。鼠標(biāo)選中垂直布局框，在控件邊界處出現(xiàn)幾個(gè)藍(lán)色的小方塊，拖動(dòng)藍(lán)色方塊可以調(diào)整布局框大小；
• 從 QtDesigner 左側(cè)工具欄中，選擇按鈕控件或其它控件，并拖動(dòng)到圖形窗口中的垂直布局框區(qū)域內(nèi)，就將創(chuàng)建的控件添加到垂直布局框。

添加到垂直布局框中的控件，其大小和位置是由垂直布局框自動(dòng)設(shè)置的。布局框中控件的大小和位置屬性，不能在 “屬性編輯器” 中編輯修改。

如果自動(dòng)布局的按鈕位置不合適，可以在布局框中添加間隔控制器 “Vertical Spacer”，以調(diào)整按鈕控件的間隔。

如下圖所示，在左側(cè)的垂直布局框中，多個(gè)按鈕控件在垂直方向排列，控件之間的間隔相同。在右側(cè)的垂直布局框的頂部和底部分別添加了一個(gè)間隔控制器，將按鈕控件調(diào)整到所需的位置。

4. 柵格布局（Grid Layout）

柵格布局也稱網(wǎng)格布局，布局框按照行和列進(jìn)行排列，將控件排列到指定的網(wǎng)格位置。

QtDesigner 創(chuàng)建柵格布局也有兩種方法：方法一是先創(chuàng)建布局中的各個(gè)控件，再選中控件添加?xùn)鸥癫季?；方法二是先?chuàng)建一個(gè)柵格布局，再依次創(chuàng)建各個(gè)控件。

以方法二為例創(chuàng)建柵格布局：

• 在 QtDesigner 左側(cè)工具欄的 “Layout” 類中，鼠標(biāo)點(diǎn)擊選擇柵格布局按鈕 “Grid Layout” 后，將其拖動(dòng)至中間的圖形窗口內(nèi)；
• 此時(shí)在圖形窗口中出現(xiàn)一個(gè)紅色直線矩形框，表示所創(chuàng)建的柵格布局框。鼠標(biāo)選中柵格布局框，在控件邊界處出現(xiàn)幾個(gè)藍(lán)色的小方塊，拖動(dòng)藍(lán)色方塊可以調(diào)整布局框大??；
• 從 QtDesigner 左側(cè)工具欄中，選擇按鈕控件或其它控件，并拖動(dòng)到圖形窗口中的柵格布局框區(qū)域內(nèi)，就將創(chuàng)建的控件添加到柵格布局框。
• 柵格布局框內(nèi)的控件，拖動(dòng)控件可以調(diào)整其在柵格布局的行列位置。

一些顯示控件還可以設(shè)置控件在布局中占若干行和列。

• 鼠標(biāo)選中待調(diào)整的文本框，移動(dòng)到右側(cè)邊界的藍(lán)色方塊，出現(xiàn)左右拉伸光標(biāo)，點(diǎn)擊拖動(dòng)控件向右拉動(dòng)，可以使控件占據(jù)柵格布局的第一列和第二列；
• 鼠標(biāo)選中待調(diào)整的文本框，移動(dòng)到下方邊界的藍(lán)色方塊，出現(xiàn)上下拉伸光標(biāo)，點(diǎn)擊拖動(dòng)控件向下拉動(dòng)，可以使控件占據(jù)柵格布局的第一行至第三行。

5. 表格布局（Form Layout）

表格布局以兩列的形式進(jìn)行布局，多用于表單，一列為標(biāo)簽，另一列為輸入控件。

在 QtDesigner 左側(cè)工具欄的 “Layout” 類中，鼠標(biāo)點(diǎn)擊選擇表格布局按鈕 “Form Layout” 后，將其拖動(dòng)至中間的圖形窗口內(nèi)；

此時(shí)在圖形窗口中出現(xiàn)一個(gè)紅色直線矩形框，表示所創(chuàng)建的柵格布局框。鼠標(biāo)選中柵格布局框，在控件邊界處出現(xiàn)幾個(gè)藍(lán)色的小方塊，拖動(dòng)藍(lán)色方塊可以調(diào)整布局框大??；

從 QtDesigner 左側(cè)工具欄中，選擇控件拖動(dòng)到圖形窗口中的柵格布局框區(qū)域內(nèi)，就將創(chuàng)建的控件添加到表格布局框。

表格布局框內(nèi)的控件，拖動(dòng)控件可以調(diào)整其在表格布局的行列位置。

6. 嵌套布局

嵌套布局是指在一個(gè)布局內(nèi)嵌套其它布局，可以實(shí)現(xiàn)在一個(gè)窗口中綜合應(yīng)用多種布局。

例如，整個(gè)窗口采用水平布局，分為左右兩部分，左側(cè)采用垂直布局，右側(cè)采用柵格布局。但如下圖所示，布局效果不盡人意。窗口水平布局雖然分為左右兩部分，但水平布局器自動(dòng)設(shè)置為等幅面、等間隔。即使使用間隔器進(jìn)行調(diào)整，也難以達(dá)到滿意的效果。

7. 容器布局

容器布局將容器控件（Container）與布局管理器結(jié)合，先用容器控件將窗口分為若干區(qū)域，再在每個(gè)區(qū)域內(nèi)加入布局管理器。

建立容器控件后，可以直接將其它控件加入容器控件內(nèi)；也可以在容器控件加入布局管理器，再向布局管理器加入多個(gè)控件，使多個(gè)控件按布局要求放在容器中。

• 首先在 QtDesigner 左側(cè)工具欄的 “Containers” 類中，選擇 “Frame” 控件或 “Widget” 控件將其拖動(dòng)至中間的圖形窗口中，創(chuàng)建容器控件。
• 對圖形窗口中的容器控件 “Frame” 或 “Widget”，可以選中后用鼠標(biāo)拖動(dòng)、拉伸來調(diào)整控件的位置和大小，或者在 “屬性編輯器” 中設(shè)置 (X, Y)、寬度、高度屬性。
• 對于需要進(jìn)行布局管理的容器控件，從在 QtDesigner 左側(cè)工具欄的 “Laytout” 類中選擇所需的布局管理器控件，將其拖動(dòng)至容器控件中，創(chuàng)建容器控件的布局管理器。

容器布局就像網(wǎng)站、報(bào)刊中的欄目、子版，可以按照編輯的要求便捷、自由地進(jìn)行布局。例如，我們要將程序窗口按照十字分割方案分為上下和左右四個(gè)部分，就在窗口先創(chuàng)建四個(gè) “Frame” 容器控件，并調(diào)整其位置和大小，然后向一個(gè)或幾個(gè) “Frame” 容器控件加入所需的布局管理控件。如下圖所示，可以實(shí)現(xiàn)對程序窗口的自由分割和布局。

進(jìn)一步地，對每個(gè) “Frame” 容器控件，依次添加輸入輸出控件。對于設(shè)置布局管理的容器，添加的控件按照布局設(shè)置自動(dòng)排列在容器的空間內(nèi)。

例如，對上圖的圖形窗口，為左上容器設(shè)置垂直布局，并添加多個(gè)按鈕控件；為左下容器設(shè)置垂直布局，并添加文本編輯控件；右容器不設(shè)置布局管理器，直接添加表格控件；為右下容器設(shè)置水平布局，并添加多個(gè)標(biāo)簽控件。

我們的圖形窗口如上圖所示，是不是看起來已經(jīng)很有型了？

在下一篇文章中，我們將介紹 PyQt5 中的一種高級(jí)頁面布局：堆疊布局，允許使用多個(gè)布局進(jìn)行切換。

傳送門 Python深度學(xué)習(xí)實(shí)戰(zhàn)PyQt5窗口切換的堆疊布局示例詳解

以上就是Python實(shí)戰(zhàn)學(xué)習(xí)PyQt5布局管理項(xiàng)目示例吸收詳解的詳細(xì)內(nèi)容，更多關(guān)于PyQt5項(xiàng)目的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論