通過前幾節課的學習，我們已經基本上掌握了使用Qt Designer完成簡單的佈局管理。通過這些知識的學習，我們算是對PyQt進行了初步的瞭解，也算是入門了！

但是僅僅掌握這些知識還是遠遠不夠的；

高深的程序技能是通過不斷的練習，反覆的試錯才能掌握的一門簡單，但是高深的武功。所以，今天我們就專門講一節實戰課程，總結一下有關Qt Designer的一些知識。

請點擊右上角“關注”按鈕關注我們喲：跟著木辛老師學習Python編程知識，變身快樂的編程達人吧~

讓我們通過實戰，來進一步鞏固學過的知識吧。

打開Qt Designer，新建一個主窗口（Main Window），然後從左側的Buttons欄拖拽一個QPushButton到主窗口中，並將按鈕的顯示標籤修改為“計算”

添加按鈕

修改按鈕顯示文本的方法有兩個

1. 雙擊按鈕控件，當按鈕變為可輸入狀態的時候，既可以修改顯示文本內容了
2. 如上圖所示，我們通過屬性選擇窗口，找到“text”，將其值改為“計算”文案即可

然後，我們來看一下如何放置這個按鈕，即這個按鈕的尺寸和位置

調整按鈕位置和大小尺寸

我們通過屬性編輯窗口中的“geometry”的字段，依次修改對應的值

1. X：當前選中控件左上角距離主窗口左側為370px
2. Y：當前選中控件上側距離主窗口上邊沿為170px
3. 寬度：即是當前選中控件的寬度，為131px
4. 高度：即是當前選中控件的高度，為41px

咱們再來看一下轉換成Python代碼後的樣子

self.pushButton = QtWidgets.QPushButton(self.centralwidget)
self.pushButton.setGeometry(QtCore.QRect(370, 170, 131, 41))
self.pushButton.setObjectName("pushButton")

可以看到我們實例化了一個QPushButton轉換，通過setGeometry方法設置了它的geometry屬性，並且傳入了X=370 Y=170 width=131 height=41的參數；

這樣，就實現了和Qt Designer相同的效果，而這個轉換後的python文件，就可以被其他的Python函數調用了。

我們來多放幾個控件，嘗試著做一個好玩的小玩具吧

放置多個控件

我們在其中添加了一些控件：

從Display Widgets中，拖拽了6個QLabel分別命名為“一月”，“二月”，“三月”，“四月”，“收入”，“支出”；

從Input Widgets中，拖拽了8個Double Spin Box控件，並作為主要數據的輸入框；

咱們再來看看對應的Python代碼會是什麼樣子吧

Python代碼

紅框中的代碼

（第29行）

self.label_2 = QtWidgets.QLabel(self.centralwidget)

實例話了一個QLabel，並起名為label_2;

（第30行）

self.label_2.setGeometry(QtCore.QRect(180, 100, 81, 41))

設置了這個控件的絕對位置為180，100，81，41；

為了大夥能更清楚的看清楚細節，我們將字體調大了一些，這裡我設置了字體大小為24

通過代碼，我們可以看到

font = QtGui.QFont()
font.setPointSize(24)
self.label_2.setFont(font)

首先實例化了一個字體實例font，設置字體屬性為24，將這個字體實例傳入label_2的setFont方法中，就完成了設置label_2字體大小的操作。

之後的代碼就類似了：實例化控件，設置字體大小，設置控件絕對位置。

所謂的絕對位置，是說控件所處於主窗口的x和y的座標，不論主窗口的怎麼改變，控件的位置都不會改變。

那有沒有更加靈活的佈局方式，在改變窗口大小的時候，控件會自動調整位置呢？

使用佈局管理器佈局

我們使用絕對座標和大小的方式佈局，每次都需要手動修改位置，比較麻煩；而且有時候窗口大小變化了，控件並不能自己調整大小。

接下來，我們將會使用佈局管理器學習和設計佈局

咱們在進行下一步操作之前呢，需要先使用一個小技巧，使我們的佈局更合理

在左側的QLabel控件的上方添加一個Qlabel控件，顯示文本置為空，為什麼要這麼做呢？請看木辛老師接下來的講解吧~

垂直佈局

咱們選擇左側的4個QLabel控件（包含後來添加的空的QLabel），點擊鼠標右鍵，在彈出的菜單中選擇“佈局” —> “垂直佈局”，大家看看效果，這“3”個控件（有一個“看不見”的控件）是不是都在縱向對齊了呀？

是的，選擇垂直佈局之後，所選擇的控件會以左邊為基礎，在縱向方向上對齊。

我們看一下轉換後的Python代碼是怎樣的：

垂直佈局

代碼是不是很清晰呀？

首先，會實例化一個QVBoxLayout類，木辛老師也給大家講過，水平佈局的實例化方法（傳送門：《木辛老師的編程課堂：Python和Qt第2講之佈局管理初探（三）》）；

然後，咱們創建的多個QLabel會被添加入這個垂直佈局中；這樣，系統就會將包含的多有控件在垂直方向自動左對齊了；

大家有沒有注意到：在屬性編輯器中，geometry屬性變成了灰色不可用，這說明這些控件的位置和大小已經由垂直佈局管理器接管，與geometry無關了。

屬性編輯器

網格佈局

接下來，我們選中中間的10個輸入框控件，點擊鼠標右鍵，在彈出的快捷菜單中選擇“佈局” —>“柵格佈局”，看看效果。

使用柵格佈局

柵格佈局的意思就是該佈局管理器的窗口呈網格狀排列。本來這8個零散的窗口控件就是要呈網格狀排列，因此使用柵格佈局管理器正好合適。

咱們看一下轉換成Python代碼轉換的效果吧

Python代碼轉換

通過這個源代碼，可以看出：只要實例化QGridLayout對象，就可以生成一個grid layout一個對象，將對應控件加入到這個佈局管理器中，就可以將佈局控制權交出給管理器了。

水平佈局

從Qt Designer的左側的Spacers欄分別將Horizontal Spacer和Vertical Spacer窗口控件拖拽到主窗口中，從Display Widgets欄將Horizontal Line窗口控件拖拽到主窗口中，之後選擇當前主窗口中所有控件，點擊鼠標右鍵，在彈出的快捷菜單中選擇“佈局” —>“水平佈局”，看看效果。

使用水平佈局

我們通過Qt Designer的菜單欄中“窗體”中的預覽選項，或者使用快捷鍵command+R既可以盡心預覽效果，非常方便喲！

使用預覽查看

學習了這麼多佈局管理器對窗體進行佈局，大家已經是不是已經熟悉了佈局的基礎操作了呀？

也許經過多次的佈局修改和調整，咱們的界面已經非常亂了，針對這種情況，Qt Designer提供了一個解決方法徹底修改佈局：鼠標右鍵單擊已存在的佈局，在彈出的快捷菜單中選擇“佈局” —>“打破布局”。

好了，今天咱們就先講到這裡吧。

請持續關注木辛老師的編程課喲，後續更多精彩陸續到來！

快樂編程，快樂成長！