腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Python深度學(xué)習(xí)實(shí)戰(zhàn)PyQt5布局管理項目示例詳解

更新時間：2021年10月18日 09:29:09 作者：youcans

本文具體介紹基本的水平布局、垂直布局、柵格布局、表格布局和進(jìn)階的嵌套布局和容器布局，最后通過案例帶小白創(chuàng)建一個有型的圖形布局窗口

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

1.1 什么是布局管理

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

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

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

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

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

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

用戶改變窗口大小時，控件的位置和大小并不隨之變化，可能導(dǎo)致部分控件不可見；
在不同平臺運(yùn)行時的外觀可能不同；
修改布局時需要完全重新編程，非常冗長費(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）

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

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

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

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

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

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

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

在這里插入圖片描述

3. 垂直布局（Vertical Layout）

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

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

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

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

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

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

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

在這里插入圖片描述

4. 柵格布局（Grid Layout）

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

QtDesigner 創(chuàng)建柵格布局也有兩種方法：方法一是先創(chuàng)建布局中的各個控件，再選中控件添加?xùn)鸥癫季郑环椒ǘ窍葎?chuàng)建一個柵格布局，再依次創(chuàng)建各個控件。

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

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

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

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

在這里插入圖片描述

5. 表格布局（Form Layout）

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

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

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

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

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

在這里插入圖片描述

6. 嵌套布局

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

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

在這里插入圖片描述

7. 容器布局

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

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

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

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

在這里插入圖片描述