[Python 練習筆記] PySide6 做一個簡單的GUI Application #4：佈局（Layout）
你現在應該已經對 Qt Designer 熟悉不少，加上前面介紹了一些部件，你可能都能夠完成一些基本功能了。
但是，你可能會發現：調整應用程式視窗的大小後，部件排列並未按照你期望的方式變化，導致介面看起來混亂不堪。
例如放大視窗後，部件大小和位置都不變，然後你應用程式就多了一大片空白：
或是視窗縮小後，部件被吃掉：
為了解決這個問題，我們就需要「佈局（Layout）」來排列和管理部件。有了佈局（Layout），我們改變視窗大小時，這些部件就會根據佈局的設定自動調整位置和大小，如此就能呈現出統一且美觀的介面。
一樣，讓我們從 Qt Designer 中看起：
各個佈局大概長怎麼樣，看它的圖示就猜得出來。這邊直接介紹該如何使用，之後可以自己到介面中玩一玩、摸索一下各個佈局的差異。
上方的 layout 圖示：點擊後會將同一個容器底下的部件，進行一個套用佈局的動作。
左方工具箱處的 layout 圖示：可以直接向其他部件一樣拉至介面中，而拉出來的 layout 會是一個容器，你需要把部件拖至裡面，才會套用佈局。
sizePolicy：
佈局放好了，部件在視窗變化之後也會跟著自動調整，看起來都按著計劃走。
但此時，新的問題又出現了。
我想要我的標籤（label）固定一個寬度，或者是寬度越寬越好，我該怎麼設定？
還記得上一篇介紹 QWidget 時，裡面有一個屬性：sizePolicy 嗎？沒錯，就是要去調整它。
這裡又要提到一個新名詞「sizeHint()」：它是一種方法，用來提示部件希望在佈局中的尺寸，簡單來說就是「建議尺寸」。這個值會根據佈局和部件的不同而不同。
以下表格說明是我翻譯官方文檔以及搜索網路上各個介紹後，用我自己的話再講述的版本。
不能直接設定 sizeHint() 嗎？我看部件大小的變動都會參考這個值欸。
要直接設定 sizeHint() 比較困難，而且部件的實際大小還受到其他因素的影響。不過，我們可以透過調整 minimumSize 和 maximumSize 這兩個屬性，來達到與相近的效果。
比如固定部件大小，我們可以將 sizePolicy 調成 Fixed ，並且一同把 minimumSize 和 maximumSize 都改成想要固定的尺寸，如此來達成一樣的效果。
如果想是要部件寬度越寬越好，直接將 sizePolicy 調成 Expanding 或MinimumExpanding 等屬性值就行。
layoutStretch：
那那我想要我的按鈕寬度佔整個視窗寬度的五分之二，而標籤（label）寬度佔五分之三，又該怎麼做呢？
這個沒什麼問題，讓我們從 Qt Designer 中看起。先點擊查看你的 layout 的屬性，我再說明：
看到 Layout 的屬性了嗎？我們可以使用其中的「layoutStretch」屬性，來達成不同部件之間的尺寸比例分配。
怎麼設定？
以上面的按鈕寬度為五分之二、標籤寬度佔五分之三為例：將 layoutStretch 設為「3, 2」即可。這個列表中的數值代表了各個部件之間的尺寸比例。
要注意的是， layoutStretch 中的數值順序與部件的排列順序相對應。在我們的例子中，標籤在左邊、按鈕位於右邊，所以先設定標籤的比例 3 ，再設定按鈕的比例 2 。
這裡再順便介紹 layout 的其它屬性：
- layoutMargin ：表示佈局內部件與佈局邊緣之間的距離。
- layoutSpacing：表示佈局中部件之間的間隔距離。
Spacers
嗯？標籤（label）寬度佔五分之三、按鈕寬度佔五分之一，然後在標籤和按鈕中夾一個五分之一的空白？
這時候需要的是「spacer」：spacer 在程式中是看不見的，主要作用是在佈局中佔據空間，從而調整其他部件之間的距離、尺寸比例或對齊方式。
怎麼添加？只需從工具箱中拖出來，並放置在你想調整的位置。然後，你可以調整 spacer 的尺寸、拉伸和對齊方式，以達到你想要的佈局效果。
回到上面的問題，要達成五分之三、五分之一、五分之一的佈局比例。解決方法就和介紹 layoutStretch 段落相同：將你 layout 的 layoutStretch 設為「3, 1, 1」即可。
spacer 相當實用且靈活，除了可以調整 sizePolicy ，我們還可以直接調整它的 sizeHint，以進一步微調 spacer 在佈局中的佔位空間。
這篇筆記內容有點小多，但在 Qt Designer 中，你能直接看到佈局對程式界面的影響，除了更好的理解各種佈局屬性的作用，學習上也不會感到那麼無聊乏味。推薦沒事的時候可以打開 Qt Designer，嘗試不同的佈局，享受這個創造的過程。
下一篇將介紹如何載入、顯示以及儲存圖片。對，沒錯，要給它加上功能。距離完成我那簡易圖片編輯的小小程式又更進一步了。
另外這篇筆記是和 #3 一起寫的，然後用來作範例的 ui 忘記改了。這就是為什麼標籤內文字都是「… #3」。