---

前言

第二节_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 的基础使用_下篇