Python PySide6 安裝與設定：整合 Visual Studio Code 與 QT Designer 完整指南

作者:

PySide6 是 Qt 框架的 Python 綁定，廣泛應用於開發跨平台的圖形使用者介面 (GUI)。在本篇文章中，我將詳細介紹如何安裝 PySide6，並與 Visual Studio Code (VS Code) 進行整合，實現快速鍵啟動 QT Designer 以及自動將 .ui 檔案轉換為 .py 檔案的功能。無論您是初學者還是進階開發者，這篇指南將幫助您快速建立高效的 GUI 開發環境。

步驟一：安裝 PySide6

首先，我們需要在您的 Python 環境中安裝 PySide6。請按照以下步驟操作：

  1. 開啟命令列介面 (如 Windows 的命令提示字元或 PowerShell)。

  2. 輸入以下指令以安裝 PySide6：

    pip install PySide6

  3. 等待安裝完成。安裝後，PySide6 提供的工具，例如 pyside6-designer.exe (QT Designer) 和 pyside6-uic.exe (用於將 .ui 檔案轉換為 .py 檔案的工具)，通常會位於以下路徑：

    C:\\Users\\您的使用者名稱\\AppData\\Roaming\\Python\\Python版本號\\Scripts\\

    例如，若您使用的是 Python 3.12，路徑可能是：

    C:\\Users\\您的使用者名稱\\AppData\\Roaming\\Python\\Python312\\Scripts\\

    請記下此路徑，後續設定中將會用到。

步驟二：在 Visual Studio Code 中安裝與設定 Qt for Python 擴充功能

為了讓 VS Code 與 PySide6 無縫整合，我們需要安裝「Qt for Python」擴充功能，並進行相關設定。

  1. 安裝 Qt for Python 擴充功能：

    • 開啟 VS Code。
    • 點擊左側活動列的「擴充功能」圖示 (或按下 Ctrl+Shift+X)。
    • 在搜尋欄中輸入「Qt for Python」，找到並安裝該擴充功能。

  2. 設定 QT Designer 路徑：

    • 安裝完成後，點擊 VS Code 左下角的「設定」圖示 (或按下 Ctrl+,) 開啟設定頁面。

    • 在搜尋欄中輸入「Qt for Python」。

    • 找到「Qt For Python: Designer Path」選項，將其設定為您之前記下的 pyside6-designer.exe 路徑，例如：

      C:\\Users\\您的使用者名稱\\AppData\\Roaming\\Python\\Python312\\Scripts\\pyside6-designer.exe

  3. 設定 .ui 轉 .py 的工具路徑：

    • 同樣在設定頁面中，找到「Qt For Python: Uic Path」選項。

    • 將其設定為 pyside6-uic.exe 的路徑，例如：

      C:\\Users\\您的使用者名稱\\AppData\\Roaming\\Python\\Python312\\Scripts\\pyside6-uic.exe

步驟三：設定快速鍵以快速開啟 QT Designer

為了提升開發效率，我們可以為 QT Designer 設定一個快速鍵，例如 Ctrl+Alt+D。步驟如下：

  1. 在 VS Code 中，按下 Ctrl+Shift+P 開啟命令面板。
  2. 輸入「Preferences: Open Keyboard Shortcuts」並選取該選項。
  3. 在快速鍵設定頁面中，搜尋「Qt for Python: Open Designer」。
  4. 點擊該選項，然後按下您想要設定的快速鍵組合，例如 Ctrl+Alt+D，並確認設定。

完成後，您只需按下 Ctrl+Alt+D，即可快速啟動 QT Designer，開始設計您的 GUI 介面。

步驟四：測試整合效果

完成以上設定後，您可以在 VS Code 中建立一個新的 .ui 檔案，或開啟現有的 .ui 檔案。使用快速鍵 Ctrl+Alt+D 開啟 QT Designer 進行設計，儲存後，VS Code 會自動透過 pyside6-uic.exe 將 .ui 檔案轉換為對應的 .py 檔案，方便您直接在 Python 程式中使用。

PySide6 與 VS Code 整合學習路徑

為了幫助您更系統化地學習 PySide6 與 VS Code 的整合，我整理了一個簡單的心智圖，供您參考：

  • PySide6 學習路徑
    • 基礎安裝
      • 安裝 PySide6 (pip install PySide6)
      • 確認工具路徑 (pyside6-designer.exe, pyside6-uic.exe)
    • VS Code 整合
      • 安裝「Qt for Python」擴充功能
      • 設定 Designer 與 Uic 路徑
      • 設定快速鍵 (Ctrl+Alt+D)
    • 進階應用
      • 設計 GUI 介面 (QT Designer)
      • 自動轉換 .ui 為 .py
      • 在 Python 中引用與客製化 GUI

結語

透過以上步驟，您應該已經成功安裝 PySide6，並將其與 Visual Studio Code 進行整合，實現快速鍵呼叫 QT Designer 以及自動將 .ui 檔案轉換為 .py 檔案的功能。這樣的設定不僅能提升 GUI 開發的效率，也讓您在開發過程中更加得心應手。如果您在設定過程中遇到任何問題，歡迎隨時留言或尋求協助！

參考來源：

發佈留言