本系列面向 Python 小白，從零開始實戰解說應用 QtDesigner 進行 PyQt5 的項目實戰。
什么叫從零開始？從軟件安裝、環境配置開始。不跳過一個細節，不漏掉一行代碼，不省略一個例圖。
布局管理就是管理圖形窗口中各個部件的位置和排列。圖形窗口中的大量部件也需要通過布局管理，對部件進行整理分組、排列定位，才能使界面整齊有序、美觀大方。
本文具體介紹基本的水平布局、垂直布局、柵格布局、表格布局和進階的嵌套布局和容器布局，最后通過案例帶小白創建一個有型的圖形布局窗口。

歡迎關注『Python 小白從零開始 PyQt5 項目實戰 @ Youcans』系列，持續更新中
Python 小白從零開始 PyQt5 項目實戰（1）安裝與環境配置
Python 小白從零開始 PyQt5 項目實戰（2）菜單和工具欄
Python 小白從零開始 PyQt5 項目實戰（3）信號與槽的連接
Python 小白從零開始 PyQt5 項目實戰（4）基本控件
Python 小白從零開始 PyQt5 項目實戰（5）布局管理

---

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

1.1 什么是布局管理

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

網站、報紙要對發布的文章設置欄目、布局管理，使頁面整齊有序、美觀大方。圖形窗口中的大量部件也需要通過布局管理，對部件進行整理分組、排列定位，才能使界面友好。

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

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

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

但是，絕對定位模式存在幾個缺點：

• 用戶改變窗口大小時，控件的位置和大小并不隨之變化，可能導致部分控件不可見；
• 在不同平臺運行時的外觀可能不同；
• 修改布局時需要完全重新編程，非常冗長費事。

1.2 Qt 中的布局管理方法

布局類則是使用各種布局方案進行布局管理。

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

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

下文具體介紹 QtDesigner 創建布局方案的使用。

---

2. 水平布局（Horizontal Layout）

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

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

以方法一為例創建水平布局：

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

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

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

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

---

3. 垂直布局（Vertical Layout）

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

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

以方法二為例創建垂直布局：

• 在 QtDesigner 左側工具欄的 “Layout” 類中，鼠標點擊選擇垂直布局按鈕 “Vertical Layout” 后，將其拖動至中間的圖形窗口內；
• 此時在圖形窗口中出現一個紅色直線矩形框，表示所創建的垂直布局框。鼠標選中垂直布局框，在控件邊界處出現幾個藍色的小方塊，拖動藍色方塊可以調整布局框大小；
• 從 QtDesigner 左側工具欄中，選擇按鈕控件或其它控件，并拖動到圖形窗口中的垂直布局框區域內，就將創建的控件添加到垂直布局框。

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

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

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

4. 柵格布局（Grid Layout）

柵格布局也稱網格布局，布局框按照行和列進行排列，將控件排列到指定的網格位置。

QtDesigner 創建柵格布局也有兩種方法：方法一是先創建布局中的各個控件，再選中控件添加柵格布局；方法二是先創建一個柵格布局，再依次創建各個控件。

以方法二為例創建柵格布局：

• 在 QtDesigner 左側工具欄的 “Layout” 類中，鼠標點擊選擇柵格布局按鈕 “Grid Layout” 后，將其拖動至中間的圖形窗口內；
• 此時在圖形窗口中出現一個紅色直線矩形框，表示所創建的柵格布局框。鼠標選中柵格布局框，在控件邊界處出現幾個藍色的小方塊，拖動藍色方塊可以調整布局框大小；
• 從 QtDesigner 左側工具欄中，選擇按鈕控件或其它控件，并拖動到圖形窗口中的柵格布局框區域內，就將創建的控件添加到柵格布局框。
• 柵格布局框內的控件，拖動控件可以調整其在柵格布局的行列位置。

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

• 鼠標選中待調整的文本框，移動到右側邊界的藍色方塊，出現左右拉伸光標，點擊拖動控件向右拉動，可以使控件占據柵格布局的第一列和第二列；
• 鼠標選中待調整的文本框，移動到下方邊界的藍色方塊，出現上下拉伸光標，點擊拖動控件向下拉動，可以使控件占據柵格布局的第一行至第三行。

---

5. 表格布局（Form Layout）

表格布局以兩列的形式進行布局，多用于表單，一列為標簽，另一列為輸入控件。

• 在 QtDesigner 左側工具欄的 “Layout” 類中，鼠標點擊選擇表格布局按鈕 “Form Layout” 后，將其拖動至中間的圖形窗口內；
• 此時在圖形窗口中出現一個紅色直線矩形框，表示所創建的柵格布局框。鼠標選中柵格布局框，在控件邊界處出現幾個藍色的小方塊，拖動藍色方塊可以調整布局框大小；
• 從 QtDesigner 左側工具欄中，選擇控件拖動到圖形窗口中的柵格布局框區域內，就將創建的控件添加到表格布局框。
• 表格布局框內的控件，拖動控件可以調整其在表格布局的行列位置。

---

6. 嵌套布局

嵌套布局是指在一個布局內嵌套其它布局，可以實現在一個窗口中綜合應用多種布局。

例如，整個窗口采用水平布局，分為左右兩部分，左側采用垂直布局，右側采用柵格布局。但如下圖所示，布局效果不盡人意。窗口水平布局雖然分為左右兩部分，但水平布局器自動設置為等幅面、等間隔。即使使用間隔器進行調整，也難以達到滿意的效果。

---

7. 容器布局

容器布局將容器控件（Container）與布局管理器結合，先用容器控件將窗口分為若干區域，再在每個區域內加入布局管理器。

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

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

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

進一步地，對每個 “Frame” 容器控件，依次添加輸入輸出控件。對于設置布局管理的容器，添加的控件按照布局設置自動排列在容器的空間內。

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

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

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

【本節完】

版權聲明：

歡迎關注『Python 小白從零開始 PyQt5 項目實戰 @ Youcans』 原創作品

原創作品，轉載必須標注原文鏈接：(https://blog.csdn.net/youcans/article/details/120730809)

Copyright 2021 youcans, XUPT

Crated：2021-10-14

歡迎關注『Python 小白從零開始 PyQt5 項目實戰 @ Youcans』系列，持續更新中
Python 小白從零開始 PyQt5 項目實戰（1）安裝與環境配置
Python 小白從零開始 PyQt5 項目實戰（2）菜單和工具欄
Python 小白從零開始 PyQt5 項目實戰（3）信號與槽的連接
Python 小白從零開始 PyQt5 項目實戰（4）基本控件
Python 小白從零開始 PyQt5 項目實戰（5）布局管理

總結

以上是生活随笔為你收集整理的Python 小白从零开始 PyQt5 项目实战（5）布局管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。