PySide6学习/教程/笔记（三）：Designer使用以及设计一个基础页面

关注

原创最新推荐文章于 2026-02-07 10:28:00 发布 4.5k 阅读 AI 写同款· GEO 优化 ›

Pyside6：Qt Designer操作开发Qt项目，其中一个重要的工作就是在Qt Designer上进行创作，通过托拉拽快速完成界面的搭建，再通过各个控件的相互关联，完成项目的逻辑。因此，如何使用Qt Designer就是一个学习的重点，本篇主要是介绍Qt Designer的一些比较常用的操作。阅读详情

刚接到通知，要我用Designer设计，说后面只需要更改ui文件就行，让我看看怎么实现。还让我先实现一个demo原型来完善需求。我真的麻了，没人教啊。

那么我们先熟悉pyside6自带的designer吧

vscode配置插件

其实很简单，知道pyside6包在哪基本就行。安装Qt for Python插件
在这里插入图片描述
然后在扩展设置里，找到路径设置。一共有三个，分别是designer和rcc以及uic

这三个都在python文件夹下的Sripts文件夹下，如果是anaconda的虚拟环境，就需要进入envs\虚拟环境\Scripts。

填完路径，你的右键就可以新建一个UI File了，直接进入designer。

QLayout

在这里插入图片描述
layout是什么？为什么要使用layout？怎么使用？

首先接触过css的肯定知道layout就是一种布局，在qt中layout的继承结构如下：在这里插入图片描述
它并不是QWidget的子类，因此并没有QWidget类相关的属性和功能，唯一的作用就是排版布局，实际上QWidget类本身就具有一个layout属性。

除了布局，layout还有一个比较重要的功能，那就是让组件随着窗口移动而移动。比如默认的效果是，随着窗口的增大，里面的各个组件也会变化。

选择一个对象，然后在工具栏点击就可以更改其内部的布局。

在这里插入图片描述
布局的使用可以方便的进行排版，可以调整QLayout中的参数来实现各种各样的效果。

可以在右侧的属性编辑器里修改layout中的属性，来控制内部组件之前的距离等等。

基本框架

实现效果如图所示：
在这里插入图片描述
我们首先创建一个MainWindow窗口，这个窗口就是我们以后的主窗口。
之前说过，主窗口自带一个菜单栏和状态栏，以及零或多个工具栏。

首先是菜单栏。
在这里插入图片描述

designer以及给出了位置，不过由于一些bug，菜单栏中输入不了中文，可以通过粘贴，或者先输入英文后续再修改的方式变成中文。

其次是工具栏，工具栏首先需要添加一条工具栏，然后向工具栏中添加动作
在这里插入图片描述

随后将创建好的动作，拖动到工具栏即可

然后就是中间QWidget的设计了。

中间的部分我需要划分为三个部分，分别是选项，展示以及工具部分。这三个部分全部使用QWidgets也没关系，因为目前我还不了解业务逻辑，也不知道怎么写。

不过还是有些细节需要注意。

每个部分需要设定最小的宽度和高度，否则随着窗口被缩小，这些部分就一点信息都展示不了。

其次如何给每个部分设定固定的比例呢，比如我想要1：2：1的宽度，这样会好看一下，那么就需要学习，sizepolicy这个属性。或者也可以设置mininumSize
在这里插入图片描述

这一部分我还不太清楚。目前还在学习，有些地方没搞懂。

最后就是将ui文件保存，一般来说，会自动编译成py文件，如果找不到，就手动编译，如果配置好的话，右键ui文件，找到编译选项即可。

最后，实现简单的界面设计和业务逻辑分离

import sys
from PySide6.QtWidgets import QApplication, QLabel, QMainWindow
from ui_mainwindow import Ui_MainWindow
import qdarkstyle

class MyMainWindow(QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        super(MyMainWindow, self).__init__(parent)
        self.setupUi(self)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    mainWin = MyMainWindow()
    app.setStyleSheet(qdarkstyle.load_stylesheet(qt_api='pyside6'))
    mainWin.show()
    sys.exit(app.exec())