python pyside2 designer 窗口设计器-马育民老师

# 介绍

PySide2 Designer 是 Qt 官方提供的可视化 UI 设计工具，专门用于快速构建 PySide2 应用程序的图形界面。它采用“所见即所得”（WYSIWYG）的工作模式，允许开发者通过拖拽组件、设置属性、关联信号与槽等操作生成 UI 文件，无需手动编写大量界面布局代码，大幅提升了 GUI 开发效率。

### 优点

PySide2 Designer 的核心价值在于**分离 UI 设计与业务逻辑**，其主要优势包括：

1.  **可视化操作**：通过拖拽按钮、文本框、表格等组件即可搭建界面，实时预览效果，降低布局学习成本。
2.  **自动生成代码**：设计完成后可导出为 `.ui` 格式的 XML 文件，或直接转换为 Python 代码，避免手动编写繁琐的布局代码（如 `QVBoxLayout`、`QGridLayout` 等）。
3.  **属性可视化配置**：在“属性编辑器”中可直接设置组件的尺寸、颜色、文本、样式等属性，无需代码调试。
4.  **信号与槽预关联**：支持在设计阶段为组件绑定信号（如按钮点击 `clicked()`）与槽函数（自定义响应逻辑），简化交互逻辑搭建。
5.  **跨平台兼容**：生成的 UI 文件可在 Windows、macOS、Linux 等平台通用，符合 Qt 的跨平台特性。

# 安装

PySide2 Designer 通常随 PySide2 库一同安装，无需单独下载。

最便捷的方式是使用 Python 包管理工具 `pip` 安装 PySide2，Designer 会作为附属工具自动包含：
```bash
pip install pyside2
```

# 运行
安装完成后，需根据操作系统找到 `designer.exe`（Windows）或 `designer`（macOS/Linux）：
-   **Windows**：通常位于 `Python安装路径\Lib\site-packages\PySide2\designer.exe`  
    （例：`C:\Users\用户名\AppData\Local\Programs\Python\Python39\Lib\site-packages\PySide2\designer.exe`）
-   **macOS**：位于 `/Library/Frameworks/Python.framework/Versions/版本号/lib/python版本号/site-packages/PySide2/Designer.app`
-   **Linux**：直接在终端输入 `pyside2-designer` 即可启动（部分系统需手动添加路径）。

# 界面布局与核心组件

[![](https://www.malaoshi.top/upload/0/0/1GW1rorSLf9p.png)](https://www.malaoshi.top/upload/0/0/1GW1rorSLf9p.png)

PySide2 Designer 的界面分为 5 个核心区域，各司其职，熟悉布局是高效使用的基础：

| 区域名称         | 位置          | 核心功能                                                                 |
|------------------|---------------|--------------------------------------------------------------------------|
| **组件面板**     | 左侧          | 提供所有可用的 Qt 组件（如按钮、文本框、表格等），支持拖拽到画布。       |
| **主画布**       | 中央          | 可视化设计界面的核心区域，可调整组件位置、大小，预览最终效果。           |
| **对象查看器**   | 右上          | 显示当前界面的组件层级结构（类似树形结构），便于快速定位和选择嵌套组件。 |
| **属性编辑器**   | 右下          | 编辑选中组件的属性（如 `text` 文本、`geometry` 位置尺寸、`styleSheet` 样式）。 |
| **信号与槽编辑器**| 底部（可切换）| 为组件绑定信号（如 `clicked` 点击）和槽函数（响应逻辑）。               |

### 核心组件分类（组件面板）

组件面板按功能分为多个类别，常用类别及组件如下：
-   **Buttons**：按钮类组件，如 `QPushButton`（普通按钮）、`QCheckBox`（复选框）、`QRadioButton`（单选按钮）。
-   **Input Widgets**：输入类组件，如 `QLineEdit`（单行文本框）、`QTextEdit`（多行文本框）、`QSpinBox`（数字调节器）。
-   **Display Widgets**：显示类组件，如 `QLabel`（文本/图片显示）、`QTextBrowser`（富文本浏览器）。
-   **Layouts**：布局管理器，如 `QVBoxLayout`（垂直布局）、`QHBoxLayout`（水平布局）、`QGridLayout`（网格布局）——**必须使用布局管理器才能实现界面自适应**。
-   **Containers**：容器类组件，如 `QWidget`（基础容器）、`QGroupBox`（分组框）、`QTabWidget`（标签页）。

# 使用

以“一个按钮点击后弹出提示框”为例，完整演示 Designer 的使用流程：

### 步骤 1：创建 UI 文件

1.  启动 PySide2 Designer，选择 `Widget` 作为基础模板，点击 `创建`
2.  从左侧组件面板拖拽 1 个 `QPushButton` 到中央画布，调整位置。
3.  选中按钮，在右侧“属性编辑器”中修改 `text` 属性为“点击我”，修改 `objectName`（组件唯一标识）为“btn_click”。

### 步骤 2：保存 UI 文件

点击菜单栏 `文件 → 保存`，将设计好的界面保存为 `.ui` 格式文件（例：`main_ui.ui`）。该文件是 XML 格式，记录了组件布局、属性、信号槽等信息。

# 将 UI 文件转换为 Python 代码

### 方式 1：窗口操作

[![](https://www.malaoshi.top/upload/0/0/1GW1roxouMID.png)](https://www.malaoshi.top/upload/0/0/1GW1roxouMID.png)

### 方式 2：手动转换（生成 `.py` 文件）

使用 PySide2 自带的 `uic` 工具将 `.ui` 文件编译为 Python 代码：

1.  打开终端，切换到 `main_ui.ui` 所在目录。
2.  执行以下命令（将 UI 转换为 `ui_main.py`）：

```bash
pyside2-uic main_ui.ui -o ui_main.py
```
生成的 `ui_main.py` 包含一个 `Ui_MainWindow` 类，封装了所有界面逻辑。

### 方式 3：动态加载（无需转换，直接读取）

无需提前转换，在 Python 代码中通过 `QUiLoader` 动态加载 `.ui` 文件，更适合频繁修改 UI 的场景：

```python
from PySide2.QtUiTools import QUiLoader
from PySide2.QtWidgets import QApplication

loader = QUiLoader()
ui = loader.load("main_ui.ui")  # 直接加载 UI 文件
ui.show()
```

### 方式 1、方式 2 生成的代码

```
# -*- coding: utf-8 -*-

################################################################################
## Form generated from reading UI file 'designertarkMN.ui'
##
## Created by: Qt User Interface Compiler version 5.15.2
##
## WARNING! All changes made in this file will be lost when recompiling UI file!
################################################################################

from PySide2.QtCore import *
from PySide2.QtGui import *
from PySide2.QtWidgets import *

class Ui_Dialog(object):
    def setupUi(self, Dialog):
        if not Dialog.objectName():
            Dialog.setObjectName(u"Dialog")
        Dialog.resize(578, 423)
        self.pushButton = QPushButton(Dialog)
        self.pushButton.setObjectName(u"pushButton")
        self.pushButton.setGeometry(QRect(120, 110, 93, 28))

self.retranslateUi(Dialog)

QMetaObject.connectSlotsByName(Dialog)
    # setupUi

def retranslateUi(self, Dialog):
        Dialog.setWindowTitle(QCoreApplication.translate("Dialog", u"Dialog", None))
        self.pushButton.setText(QCoreApplication.translate("Dialog", u"PushButton", None))
    # retranslateUi

```

# 运行

### 生成的代码不能直接运行

PySide2 Designer 生成的代码不能直接运行，主要是因为它只包含了 **界面的布局和组件定义**，而 **缺少** 完整的应用程序 **入口** 和 **事件循环逻辑**。具体原因如下：

1. **代码性质不同**：Designer 生成的是界面描述代码（通常是 `.ui` 文件转换的 `.py` 文件），它仅定义了界面的结构（如窗口、按钮、布局等），不包含程序的执行逻辑。

2. **缺少应用程序入口**：一个可运行的 PySide2 程序需要创建 `QApplication` 实例、启动事件循环（`app.exec_()`）等核心代码，而 Designer 生成的代码不包含这些部分。

3. **遵循 MVC 设计模式**：Designer 生成的代码相当于视图（View）部分，需要与控制器（Controller）代码结合才能运行，这种分离有利于代码维护。

### 解决

要让它运行，需要编写入口代码（通常新建一个 `.py` 文件）：

```
import sys
from PySide2.QtWidgets import QMainWindow, QApplication, QWidget,QDialog
from UI_MainWindow import Ui_Dialog

# Fusion样式在所有平台提供一致的现代外观
QApplication.setStyle("Fusion")

class MyMainWindow(QWidget):
  def __init__(self):
    super().__init__()
    self.window = Ui_Dialog()
    self.window.setupUi(self)
    self.initUI()

def initUI( self ):
    # 点击事件连接槽函数
    self.window.pushButton.clicked.connect(self.send)

# 发送
  def send(self):
    print("Hello World!")

if __name__ == "__main__":
  app = QApplication(sys.argv)
  window = MyMainWindow()  # 该类是生成的类名
  window.show()
  # 启动事件循环
  app.exec_()
```

# 运行报错

有时，安装其他库后，导致运行 pyside2 报错，如下：

[![](https://www.malaoshi.top/upload/0/0/1GW1rpvHmfoU.png)](https://www.malaoshi.top/upload/0/0/1GW1rpvHmfoU.png)

### 原因

通常是由于 Qt 平台插件无法正确加载导致的。这是 PySide2（以及其他 Qt 绑定）在部署或运行时常见的问题。以下是解决方法：

常见原因及解决方案：

1. **缺少平台插件文件**
   Qt 需要特定的平台插件（如 Windows 上的 `qwindows.dll`）才能运行。这些文件通常位于 `PySide2/plugins/platforms/` 目录下。

2. **无法找到插件路径**
   应用程序可能无法自动找到插件目录，需要手动指定。

3. **权限或依赖问题**
   插件文件可能损坏、权限不足，或缺少相关的系统依赖（如 Visual C++ 运行时）。

### 解决方法

在开头增加下面代码：

```
import os
import PySide2

dirname = os.path.dirname(PySide2.__file__)
plugin_path = os.path.join(dirname, 'plugins', 'platforms')
os.environ['QT_QPA_PLATFORM_PLUGIN_PATH'] = plugin_path
# Fusion样式在所有平台提供一致的现代外观。不添加此样式，使用的windows早期的样式
QApplication.setStyle("Fusion")
```

# 总结

Designer 生成的代码是界面的“骨架”，而运行程序需要：

1. 导入生成的界面类
2. 创建窗口类并初始化界面
3. 添加业务逻辑（如事件处理）
4. 编写应用程序入口代码（创建 `QApplication`、启动事件循环）

这种分离设计的好处是：当你用 Designer 修改界面后，只需重新生成 `ui_*.py` 文件，而业务逻辑代码可以保持不变，降低了维护成本。

原文出处：http://malaoshi.top/show_1GW1rq2m7Ys0.html