你好，我是安然無虞。

在閱讀本文之前, 有需要的老鐵可以先回顧一下上篇文章:
壓測工具開發(一)——使用Qt Designer構建簡單界面

構建側邊欄

我們要實現類似于下面這樣的側邊欄功能:

可以在 Qt Designer 中使用(containers)容器里的Frame容器, 拖到主窗口中即可:

要實現側邊欄中每一個功能按鈕可以在Frame容器控件中添加所需數量的button按鈕控件即可.

因為界面上需要容納多個子窗口, 所以還需要使用容器里的MDI容器控件, 添加到主界面中:

我們將 側邊欄Frame容器設置為垂直布局, 再將包含側邊欄和MDI子窗口的控件設置為水平布局, 界面即可按預期顯示:

如果我們想要讓側邊欄的按鈕設置為前面提到的圖標模樣, 該怎么做呢?

可以在 網上搜索 QtAwesome官網

QtAwesome使用

QtAwesome是一個Python庫，用于在PyQt和PySide應用中使用圖標字體.它支持多種圖標系列，如msc、fa5等，允許用戶自定義顏色、樣式、動畫效果.

這個網站上面還有QtAwesome的使用示例, 請試著理解.

關于 QtAwesome 的使用有一個重要的問題就是: 我怎么知道想用的圖標對應的名字呢, 從哪里能看到呢?

如果是 Windows電腦可以在安裝的QtAwesome目錄下找到 qta-browser.exe可執行程序, 雙擊運行即可顯示所有圖標信息.

因為我用的是macOS系統電腦, 所以這里主要講解macOS系統中的操作:
1.確保環境配置正確
確保你已經在 PyCharm 的虛擬環境中正確安裝了 qtawesome 模塊以及相關的依賴項（如PySide6）
如果尚未安裝，可以通過以下命令安裝：

pip install qtawesome pyside6

2.找到 icon_browser.py 文件
在 PyCharm 的虛擬環境中，qtawesome 模塊通常安裝在 site-packages 目錄下.
可以通過以下方式找到 icon_browser.py 文件：
打開 PyCharm 的終端, 輸入以下命令，找到 qtawesome 的安裝路徑：

python -c "import qtawesome; print(qtawesome.__file__)"

這將輸出類似以下路徑：

/path/to/your/virtualenv/lib/python3.x/site-packages/qtawesome/__init__.py

icon_browser.py 文件通常位于 qtawesome 模塊的目錄下，路徑類似于：

/path/to/your/virtualenv/lib/python3.x/site-packages/qtawesome/icon_browser.py

3.運行 icon_browser.py
打開 PyCharm 的終端或命令行工具, 切換到 qtawesome 模塊所在的目錄：

cd /path/to/your/virtualenv/lib/python3.x/site-packages/qtawesome

運行 icon_browser.py 腳本：

python3 icon_browser.py

如果一切配置正確，icon_browser.py 將啟動一個圖形界面，顯示所有可用的圖標及其名稱.

通過運行 icon_browser.py，你可以直觀地查看 qtawesome 模塊中所有可用的圖標，并且可以直接復制圖標名稱用于你的項目中.

運行之后顯示如下:

我們可以篩選自己想設置的圖標系列以及名字, 比如想設置用戶方面的圖標, 就可以在搜索框中輸入類似于 user 的文本進行查找即可.

好, 現在已經知道了圖標對應的信息, 就可以在我們的PySide6程序中使用了.

我們將側邊欄中的第一個圖標設置為客戶端圖標, 名字叫btn_client, 這個時候可以將其圖標設置為剛剛搜索的fa5.user-circle:

import qtawesome as qta# 設置側邊欄圖標 - qtawesome
self.ui.btn_client.setIcon(qta.icon('fa5.user-circle', color='SteelBlue'))
self.ui.btn_client.setIconSize(QSize(30, 30))

執行之后顯示效果如下:

我們想把側邊欄寬度調整的小一些, 該怎么做呢?

調整側邊欄寬度

踩坑了, 這個我搞了半個多小時才找出來, 因為 Frame控件和MDI控件位于同一個水平布局中, 理論上只要調整這個父級水平布局中的 layoutStretch 屬性即可, 主需要輸入兩個數值，分別表示 Frame 和 MDI Area 的寬度比例, 把Frame對應的數值調小一些即可, 像這樣:

但是這樣設置了之后, Frame控件并沒有變化.

要解決這個問題可以設置Frame控件的的最小寬度以及MDI控件的水平拉伸策略改為Expanding, 使其自動填充剩余空間.

這樣就可以解決問題了. 現在側邊欄的寬度就好看多了:

了解: sizePolicy屬性

sizePolicy屬性決定了控件對可用空間的“需求”和“適應方式”.

sizePolicy 的核心作用

當控件被放置在布局（如水平布局、垂直布局）中時，布局管理器會根據以下因素分配空間：

1. 父窗口/容器的可用空間
2. 控件自身的 sizeHint（建議大小）
3. 控件的 minimumSize/maximumSize（最小/最大限制）
4. sizePolicy（動態調整策略）

sizePolicy 會告訴布局管理器：

• 控件是否希望被拉伸（例如填滿剩余空間）
• 控件是否希望保持固定大小
• 如何與其他控件競爭空間

sizePolicy 的組成部分

sizePolicy 包含兩個維度的策略和一個拉伸因子：

1.水平策略 (HorizontalPolicy): 定義控件在 水平方向 上的大小調整行為.

常見值：

• Fixed: 固定寬度（嚴格使用 sizeHint）
• Minimum: 寬度可以擴大，但不可小于 sizeHint
• Maximum: 寬度可以縮小，但不可大于 sizeHint
• Preferred: 優先使用 sizeHint，但可擴大或縮小
• Expanding: 盡可能填滿空間（主動搶占剩余空間）
• Ignored: 完全忽略 sizeHint（根據布局強制調整）

2.垂直策略 (VerticalPolicy): 定義控件在 垂直方向 上的大小調整行為（與水平策略同理）.

3.拉伸因子 (HorizontalStretch/VerticalStretch)
一個整數值（默認為 0），用于 控制控件在布局中的空間分配比例.

常見場景示例

場景 1：讓按鈕填滿水平空間

設置按鈕的 HorizontalPolicy 為 Expanding，它會自動拉伸以填滿布局的剩余寬度.

場景 2：固定輸入框寬度

設置輸入框的 HorizontalPolicy 為 Fixed，寬度由 sizeHint 決定.

場景 3：按比例分配空間

兩個控件的 HorizontalStretch 分別為 1 和 2，則它們的寬度比例為 1:2.

偽狀態

現在想加一個小功能: 希望按鈕在默認情況下沒有邊框, 當鼠標移動到圖標上會顯示邊框, 并且會有背景色.

這個該怎么做呢?

我們點擊 Frame 控件, 選擇 styleSheet 屬性, 設置想要的屬性值即可.

這里的屬性值我們這樣設置:

QPushButton {border: none;
}QPushButton:hover {border: 1px solid yellow;background-color: Cornsilk;
}

對上面代碼的解釋:

• QPushButton { border: none; }：當按鈕處于正常狀態時，不顯示邊框.
• QPushButton:hover { border: 1px solid yellow; background-color: Cornsilk; }：當鼠標懸停在按鈕上時，按鈕的邊框變為1像素寬的黃色實線，背景顏色變為Cornsilk（一種淺黃色）

設置好之后, 我們再來運行程序看看效果:

符合預期, 但是我們發現上面的Frame控件和MDI控件的周邊(左邊、右邊和中間)都有間隙, 我們想去掉其中的間隙該怎么做呢?

由于 Frame控件和MDI控件 位于同一個水平布局中, 所以只需要調整外層的水平布局的Layout 對應的屬性值即可.

按照上面設置后, 再運行看看效果:

ok, 沒問題, 剛剛的間隙沒有了.

現在還需要對側邊欄的圖標控件添加一個小功能: 當鼠標移動到圖標上時顯示對應的名稱, 比如鼠標移動到 btn_client 圖標上會顯示 客戶端 的字樣.

只需要點擊對應的圖標控件, 然后設置 toolTip 的值即可, 像這樣:

現在就實現了前面提到的功能:

遇見安然遇見你，不負代碼不負卿。

謝謝老鐵的時間，咱們下篇再見～