---

前言

第二節_PySide6項目創建流程介紹、手把手教學打包EXE可執行文件 詳細介紹了PySide6項目的創建和exe可執行文件的打包；本節介紹如何快速入門，簡單來說就是如何通過拖曳鼠標等可視化操作創建一個 UI 程序，達到快速入門的目的。
即主要講解使用 Qt Designer（PySide6-Designer工具） 來制作 UI 界面，需要注意的是創建 UI 程序，可以通過 UI 工具和編寫純代碼兩種方式來實現，各有優勢。

---

一、Qt Designer簡介

1.什么是 Qt Designer？

Qt Designer 是 Qt 框架官方提供的 可視化界面設計工具，專為快速構建 GUI 應用程序而生。作為 PySide6（Qt 的 Python 綁定）的核心配套工具，它允許開發者通過拖拽組件的方式設計窗口、對話框等界面元素，無需手動編寫布局代碼，大幅提升開發效率。

2.核心功能

1）拖拽式設計：提供按鈕、文本框、表格等 200+ 預制 Qt 控件，直接拖拽到畫布；

2）實時預覽：支持切換不同主題（如 Windows、Fusion）查看界面效果；

3）屬性編輯器：精細調整控件尺寸、樣式、字體、事件等屬性；

4）信號與槽連接：可視化綁定控件事件與業務邏輯（需結合代碼實現）；

5）資源管理：集成圖片、圖標等資源到 .qrc 文件，避免路徑依賴；

6）多語言支持：為國際化（i18n）生成翻譯模板文件（.ts）。

3.核心優勢

優勢	說明
開發效率提升	復雜布局秒級完成，告別手寫 QHBoxLayout 和 QVBoxLayout 代碼
設計代碼分離	通過 .ui 文件隔離界面與邏輯，便于團隊協作和后期維護
跨平臺一致性	生成的界面自動適配 Windows/macOS/Linux 原生風格
官方維護支持	由 Qt 公司持續更新，完美兼容 PySide6 最新版本

二、Qt Designer界面介紹

1.主窗口的創建

在Pycharm的外部工具中點擊 PySide6-Designer 工具，會自動彈出 “新建窗體” 對話框，在模板選項中，最常用的就是 Widget（通用窗口）和 Main Window（主窗口）；這里我們選擇 Main Window 模板，點擊 ”創建“ ，并保存并命名為 test002.ui，其主窗口默認添加了菜單欄、工具欄和狀態欄：

2.窗口五大區域的簡單介紹

①區域 1 是 Widget Box（工具箱）窗格，其中提供了很多控件，每個控件都有自己的名稱，用于提供不同的功能，如常用的按鈕、單選按鈕、文本框等，可以直接拖曳到主窗口中：

②區域 2 為主窗口，可以將區域 1 的控件拖曳到區域 2 中，在菜單欄中選擇“窗體”→“預覽”
命令，或者按 Ctrl+R 快捷鍵，就可以看到窗口的預覽效果：

③區域 3 為“對象查看器”面板，可以查看主窗口中放置的對象列表：

④區域 4 是 Qt Designer 的“屬性編輯器”面板，其中提供了對窗口、控件、布局的屬性編輯功能，
1）sizePolicy：控件大小策略；2）minimumSize：最小寬度和最小高度；3）maximumSize：最大寬度和最大高度等屬性對UI界面上排版比較重要，需要多注意下：

⑤區域 5 是 “信號/槽編輯器” 面板、 “動作編輯器” 面板和“資源瀏覽器” 面板的集合：
1）在 “信號/槽編輯器” 視圖中可以為控件添加自定義的信號與槽函數，以及編輯控件的信號與槽函數；
2）在 “動作編輯器” 視圖中可以編輯在菜單欄里添加的各種動作，重新命名、增加圖標和添加快捷鍵等操作；
3）在 “資源瀏覽器” 視圖中創建、增加 .qrc 資源文件，便于其他控件對資源文件的引用。
其中信號/槽使用方式主要還是通過代碼操作比較方便，但是 “動作編輯器” 和 “資源瀏覽器” 在UI工具使用的很多，這兩部分需要注意下。

三、界面布局 Layout

1.窗口布局方式介紹

當主窗口中有很多控件時，為了避免雜亂需要對界面進行排版和布局，這點非常重要。
進行布局一般有兩種方式：一是使用布局管理器進行布局；二是使用容器控件進行
布局；由于大體邏輯一致，這邊主要對用布局管理器進行布局進行講解。

四種窗口布局方式

布局方式	說明
Vertical Layout（垂直布局）	將控件按 垂直方向（從上到下） 依次排列，適用場景：設置菜單、縱向排列的選項組
Horizontal Layout（水平布局）	將控件按 水平方向（從左到右） 依次排列，適用場景：工具欄按鈕、水平排列的表單元素
Grid Layout（網格布局）	將控件放置在 二維網格的行列交叉點，支持跨行跨列，適用場景：復雜表單、儀表盤、棋盤式布局
Form Layout（表單布局）	專門用于 標簽-輸入框對 的快速布局，自動對齊標簽和控件，適用場景：登錄窗口、數據錄入表單

2.UI布局技巧概述

在進行UI布局之前，需要了解下布局的一些技巧，總體來說是 由內而外，層層遞進，后面實戰應用中會使用到下述技巧，可以先進行大體理解，然后在UI界面布局時進行相互印證：

1）先不使用任何的布局方式 Layout ，把所有控件 按位置 擺放在界面上；

2）然后先從 最內層開始 進行控件的布局方式 Layout 設定；

3）逐步拓展到 外層 進行控件的布局方式 Layout 設定；

4）最后調整 layout 中控件的大小比例， 優先使用布局方式 Layout的 layoutStrentch 屬性來控制。

3.UI布局實戰應用

①參照第二節_PySide6項目創建流程介紹、手把手教學打包EXE可執行文件的demo例程進行創建Pycharm項目，并命名為PythonDemo002，以下是項目目錄結構：

②打開 test002.ui 文件，將所需要的控件 按位置 擺放在界面上，先不進行任何布局，并將每個控件進行命名。如下圖所示，全部控件主要分為 9 部分，總體呈垂直分布排列：

③對第 3 部分 lab_Image 顯示圖像的控件進行 最小高度 的值設置為 300，避免界面縮放時保持控件的高度；對第 5 部分 PushButton 控件進行 最小尺寸 、最大尺寸和圖標尺寸的屬性設置為 60，固定圖標的大小（btn_4控件放寬了最大寬度的值，為了后續展示網格布局的差異）：

④按住Ctrl按鍵，然后使用鼠標點擊控件，可以實現選中多個控件，然后右鍵選擇布局操作。
1）對第 1 部分進行水平布局；
2）對第 5 部分進行網格布局（注意：網格布局中的“btn_4”控件默認占一個方格，對其進行拉伸就可以占 2個方格）；
3）將第 7 部分和第 8 部分合并成一個區域，整體進行水平布局，其中第7 部分遵循布局技巧從 最內層開始 先將 label_3 、btn_OpenCalc 、btn_OpenNote三個控件進行水平布局，再跟TextEdit_1控件進行垂直布局，逐步拓展到 外層 最后跟第 8 部分進行水平布局；
4）最后再將MainWindow進行垂直布局即可，布局結構目錄可以在 “對象查看器” 中查看：

⑤對布局界面進行一些精細的調整，調整第 1 部分和第 7 部分中控件的大小比例， 優先使用布局方式 Layout的 layoutStrentch 屬性來控制，分別調整為：1，6，2 和 2，1，1 比例：

⑥對第 9 部分 PushButton 控件進行居中處理，需要先在工具欄拖動一個水平布局控件，然后將 PushButton 控件放入水平布局中（注意：如果在界面上無法放進去，可以先在界面上選中水平布局控件，然后將PushButton 控件拖入 “對象查看器” 中所被選中的水平布局控件）；最后將 PushButton 控件的 水平策略 設置為 Fixed ：

⑦對第 8 部分進行優化，期望 “打開圖片消息” label_2 控件能居中，并且 TextEdit_2 控件的上邊緣能跟第 7 部分的 TextEdit_1 控件上邊緣在同一水平：
1）使 label_2 控件居中可以參照步驟 ⑥ 的用法；
2）使 TextEdit 控件上邊緣在同一水平可以通過調整水平布局 horizontalLayout_5 控件 Layout 屬性的 LayoutTopMargin 和 LayoutBottomMargin 值可以來調整控件上下間距，這里各設置為 4 （調整控件左右間距可以通過 LayoutLeftMargin 和 LayoutRightMargin ）：

⑧對主窗體 MainWindow 進行風格和樣式的設置，通過對 styleSheet 屬性指定以下內容就可以對主界面的風格和樣式進行改變：

* { \n color: blue ;\n font-size:15px;\n}

總結

以上就是關于如何通過拖曳鼠標等可視化操作創建一個 UI 程序的詳細介紹，主要講解了 Qt Designer的核心功能和優勢，以及UI界面的整體布局，通過實戰應用能更快的入門，小伙伴都行動起來操作一下吧！需要明確的是 Qt Designer 符合 MVC（模型—視圖—控制器）設計模式，做到了顯示和業務邏輯的分離，本節的講解主要是顯示方面，后續會通過對 “信號/槽編輯器” 面板、 “動作編輯器” 面板和“資源瀏覽器” 面板的介紹來講解業務邏輯的方面，可參考 第四節_PySide6中Qt Designer 的基礎使用_下篇