写 Qt UI,到底该拖控件,还是写代码?

写 UI，到底是该“拖拉拽”还是手动撸代码？

很多刚接触 Qt 或 PySide 的同学，在动手写第一个小工具时，都会面临一个灵魂拷问：

“明明有 Qt Designer 这种像拼图一样方便的工具，我为什么还要费劲巴拉地写代码去堆布局？”

大家想象中的场景是：鼠标点一点，控件拖一拖，完美 UI 瞬间生成。

但现实往往是：为了改一个控件名，你得在可视化界面和代码间来回横跳；一旦 UI 文件重新生成，之前手动改的逻辑可能就莫名其妙被覆盖了。

今天，我们就以开发一个“视频合成软件”为例，聊聊为什么在处理简单界面时，我更推荐你“手动撸布局”。

效率陷阱：Qt Designer 真的快吗？

我们先做一个简单的对比：

我的判断是： 对于这种小型工具软件，手动布局不仅不是浪费时间，反而是为了后续修改代码时能“飞起来”。 因为你会对每一个组件的变量名（比如 self.merge_button）刻骨铭心，改起来极其方便。

拆解：如何把一张设计图变成代码？

在写代码之前，我们要先学会“拆”。拿到一张截图，不要急着敲 QPushButton，先在脑子里给它做个手术：

这个视频合成软件，我们可以拆成 6 个垂直部分：

1. 提示区：一个简单的文本 Label。
2. 核心区：左边是视频列表，右边是“打开/删除”按钮（典型的水平套垂直布局）。
3. 路径选择区：又一个提示 Label。
4. 输出设置区：左边输入框，右边选择按钮。
5. 操作区：硕大的“合成视频”按钮。
6. 反馈区：最底部的进度条。

看清了这个结构，代码其实就是往对应的“框”里填内容。

实战：从零搭建你的“视频合成”窗口

第一步：搭建骨架

首先，我们需要创建一个项目文件夹 merge_video，新建 main.py。我们先给窗口起个霸气的名字，设置合适的尺寸：

from PyQt6.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel# 导入 sys 模块，用于接收命令行参数和程序退出import sysclassMainWindow(QWidget):def__init__(self, *args, **kwargs):        super().__init__(*args, **kwargs)# 设置窗口标题栏显示的文字        self.setWindowTitle('视频合成软件 by 大熊教育科技')# 设置窗口的初始大小（宽度: 853px, 高度: 597px）        self.resize(853, 597)# 定义主布局：一切的父容器        layout = QVBoxLayout()# 将当前窗口（self）的布局设置为刚才创建的 layout        self.setLayout(layout)# 选择文件提示label        self.input_file_label = QLabel('请添加需要合并的视频文件')# 将标签控件添加到垂直布局中，使其在窗口中显示出来        layout.addWidget(self.input_file_label)        self.show() # 显示窗口if __name__ == '__main__':    print(sys.argv)    app = QApplication(sys.argv)    w = MainWindow()    sys.exit(app.exec())

第二步：实现“嵌套”的精髓

最关键的是第 2 部分（视频列表）。这里涉及到了布局嵌套：

• 先创建一个大的水平布局 list_content。
• 左边放一个 QListWidget。
• 右边放一个垂直布局 buttons_layout，里面塞进“打开”和“删除”。

from PyQt6.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel, QHBoxLayout, QListWidget, QPushButton# 导入 sys 模块，用于接收命令行参数和程序退出import sysclassMainWindow(QWidget):def__init__(self, *args, **kwargs):        super().__init__(*args, **kwargs)# 设置窗口标题栏显示的文字        self.setWindowTitle('视频合成软件 by 大熊教育科技')# 设置窗口的初始大小（宽度: 853px, 高度: 597px）        self.resize(853, 597)# 定义主布局：一切的父容器        layout = QVBoxLayout()# 将当前窗口（self）的布局设置为刚才创建的 layout        self.setLayout(layout)# 选择文件提示label        self.input_file_label = QLabel('请添加需要合并的视频文件')# 将标签控件添加到垂直布局中，使其在窗口中显示出来        layout.addWidget(self.input_file_label)#  实例化水平布局容器，用于容纳左侧列表和右侧按钮组        list_content = QHBoxLayout()# 初始化列表控件，用于展示用户添加的视频文件路径        self.list_path = QListWidget()# 将列表控件添加至水平布局的左侧        list_content.addWidget(self.list_path)# 构建右侧按钮组的垂直布局容器        buttons = QVBoxLayout()# 实例化功能按钮，并定义为实例属性以便后续绑定点击事件        self.open_btn = QPushButton('打开')        self.del_btn = QPushButton('删除')# 将按钮按垂直顺序注册到按钮布局容器中        buttons.addWidget(self.open_btn)        buttons.addWidget(self.del_btn)# 其作用是自动填满剩余的空白区域，将上方已添加的控件（如“打开”、“删除”按钮）推向顶部        buttons.addStretch(1)#【核心步骤】将右侧的垂直按钮布局嵌套进整体的水平布局中        list_content.addLayout(buttons)# 将配置完成的复合水平布局（包含列表和按钮组）挂载到窗口的主垂直布局中        layout.addLayout(list_content)        self.show() # 显示窗口if __name__ == '__main__':    print(sys.argv)    app = QApplication(sys.argv)    w = MainWindow()    sys.exit(app.exec())

❝

老师傅的经验笔记：

在创建按钮时，我习惯使用 self.open_button 这种形式。为什么要加 self？因为这些按钮后面要接业务逻辑，作为实例属性，你在任何地方都能轻易调用它。

第三步：构建路径引导标识

在复杂的嵌套布局（如视频列表区）下方，我们需要为用户提供一个明确的操作指示。这通常由一个静态的 QLabel 组件承担，用于告知用户下一步需要选择合成文件的存储位置。

classMainWindow(QWidget):def__init__(self, *args, **kwargs):        super().__init__(*args, **kwargs)# 省略若干代码# 输出label        self.out_file_label = QLabel('请选择合成文件保存位置')        layout.addWidget(self.out_file_label)

第四部分：输出路径选择

这是一个水平布局，包含一个输入框和一个按钮。

from PyQt6.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel, QHBoxLayout, QListWidget, QPushButton, QLineEdit# 导入 sys 模块，用于接收命令行参数和程序退出import sysclassMainWindow(QWidget):def__init__(self, *args, **kwargs):        super().__init__(*args, **kwargs)# 省略若干代码# 输出label        self.out_file_label = QLabel('请选择合成文件保存位置')        layout.addWidget(self.out_file_label)# 实例化引导标签，明确告知用户该区域的功能：选择导出位置        self.out_file_label = QLabel('请选择合成文件保存位置')# 将标签直接挂载至主垂直布局中，作为该模块的头部标题        layout.addWidget(self.out_file_label)# 实例化水平布局容器，用于实现“输入框 + 按钮”的横向并列结构        output_content = QHBoxLayout()# 初始化单行文本输入框，用于实时显示或手动输入最终合成文件的路径        self.output_line = QLineEdit()# 初始化功能按钮，通常用于触发系统文件对话框（QFileDialog）        self.choice_button = QPushButton('选择')# 按照从左至右的顺序，将输入框和按钮注册到水平布局容器中        output_content.addWidget(self.output_line)        output_content.addWidget(self.choice_button)# 将配置完毕的“输入+选择”复合水平布局挂载至全局垂直布局中        layout.addLayout(output_content)

第五部分：合成按钮

第5分部是单独的一个大按钮，代码如下：

# 实例化任务触发按钮，作为启动视频合成逻辑的核心入口self.merge_btn = QPushButton('开始合成视频')# 将合成按钮挂载至主布局容器底部，完成操作区的闭环layout.addWidget(self.merge_btn)

第六部分：进度条

最后是一个进度条，完整代码如下：

from PyQt6.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel, QHBoxLayout, QListWidget, QPushButton, \    QLineEdit, QProgressBar# 导入 sys 模块，用于接收命令行参数和程序退出import sysclassMainWindow(QWidget):def__init__(self, *args, **kwargs):        super().__init__(*args, **kwargs)# 设置窗口标题栏显示的文字        self.setWindowTitle('视频合成软件 by 大熊教育科技')# 设置窗口的初始大小（宽度: 853px, 高度: 597px）        self.resize(853, 597)# 定义主布局：一切的父容器        layout = QVBoxLayout()# 将当前窗口（self）的布局设置为刚才创建的 layout        self.setLayout(layout)# 选择文件提示label        self.input_file_label = QLabel('请添加需要合并的视频文件')# 将标签控件添加到垂直布局中，使其在窗口中显示出来        layout.addWidget(self.input_file_label)#  实例化水平布局容器，用于容纳左侧列表和右侧按钮组        list_content = QHBoxLayout()# 初始化列表控件，用于展示用户添加的视频文件路径        self.list_path = QListWidget()# 将列表控件添加至水平布局的左侧        list_content.addWidget(self.list_path)# 构建右侧按钮组的垂直布局容器        buttons = QVBoxLayout()# 实例化功能按钮，并定义为实例属性以便后续绑定点击事件        self.open_btn = QPushButton('打开')        self.del_btn = QPushButton('删除')# 将按钮按垂直顺序注册到按钮布局容器中        buttons.addWidget(self.open_btn)        buttons.addWidget(self.del_btn)# 其作用是自动填满剩余的空白区域，将上方已添加的控件（如“打开”、“删除”按钮）推向顶部        buttons.addStretch(1)#【核心步骤】将右侧的垂直按钮布局嵌套进整体的水平布局中        list_content.addLayout(buttons)# 将配置完成的复合水平布局（包含列表和按钮组）挂载到窗口的主垂直布局中        layout.addLayout(list_content)# 实例化引导标签，明确告知用户该区域的功能：选择导出位置        self.out_file_label = QLabel('请选择合成文件保存位置')# 将标签直接挂载至主垂直布局中，作为该模块的头部标题        layout.addWidget(self.out_file_label)# 实例化水平布局容器，用于实现“输入框 + 按钮”的横向并列结构        output_content = QHBoxLayout()# 初始化单行文本输入框，用于实时显示或手动输入最终合成文件的路径        self.output_line = QLineEdit()# 初始化功能按钮，通常用于触发系统文件对话框（QFileDialog）        self.choice_button = QPushButton('选择')# 按照从左至右的顺序，将输入框和按钮注册到水平布局容器中        output_content.addWidget(self.output_line)        output_content.addWidget(self.choice_button)# 将配置完毕的“输入+选择”复合水平布局挂载至全局垂直布局中        layout.addLayout(output_content)# 实例化任务触发按钮，作为启动视频合成逻辑的核心入口        self.merge_btn = QPushButton('开始合成视频')# 将合成按钮挂载至主布局容器底部，完成操作区的闭环        layout.addWidget(self.merge_btn)# 实例化进度条组件（QProgressBar），用于实时反馈后台合成任务的完成百分比        self.progress_bar = QProgressBar()# 将进度条注册到布局的最底端，为用户提供直观的状态监控界面        layout.addWidget(self.progress_bar)        self.show() # 显示窗口if __name__ == '__main__':    print(sys.argv)    app = QApplication(sys.argv)    w = MainWindow()    sys.exit(app.exec())

最终呈现：虽然“素颜”，但骨架已成

当你按照这 6 个部分依次将 QLabel、QLineEdit、QPushButton 和 QProgressBar 填充进布局后，运行程序，你会看到一个初具规模的窗口。

你会发现： 现在的界面可能有点“素”，甚至有点丑。

别担心，这只是“素颜状态”。在 GUI 开发中，我们遵循“先逻辑，后审美”。现在结构已经稳固，后续我们只需要一行 CSS 样式表（QSS），就能让它华丽变身。

这才是掌握 GUI 的最短路径

通过这节课的手动布局，你现在应该已经清楚地知道：

• 整个窗口是由哪个垂直布局控制的。
• 每一个按钮的变量名叫什么。
• 布局之间是如何一层套一层的。

这种掌控感，是“拖拉拽”给不了的。

想知道如何给这个“素颜”界面一键美颜，以及如何让这些按钮真正动起来吗？

下节课，我们接着聊。