PySide6入门教程之二 | 手把手教你Qt Designer的使用

---

---

前言

☘️ 继上一章《PySide入门实战之一 | 手把手教你安装PySide6及环境配置》完成PySide6环境配置后，这一章节我们开始QT Designer的使用。QT Designer是一个图形用户界面（GUI）设计工具，是Qt应用程序开发框架的一部分。它允许开发人员以可视化方式设计和创建用户界面，而不需要手动编写所有的GUI代码。本章主要在Pycharm下开发，从以下方面进行讲解：

1. 如何创建窗口并添加按钮
2. 如何修改样式表对界面进行美化
3. 如何使用uic将ui文件转换为py文件
4. 加载py文件显示窗口

---

🚀🚀🚀 Pyside6实战教程专栏目录入口：点击跳转

---

一、创建窗口

• 点击 Tools -> Pyside6 -> Pysdie6-Designer 可直接启动QT Designer（也可直接选中项目中任意文件夹右键启动）
  
  工作区：窗口界面的布置与调整；
  组件区：选择组件拖至窗口操作区；
  对象区：组件的名称、数量以及它们之间的布局关系；
  属性区：设置组件的属性，如大小、名称、布局等；
  资源区：相关图标等资源文件的导入，详细操作见 PySide6入门教程之四。

• 点击文件 -> 新建，其中Widget与Main Window最为常用。这里我们选择创建一个Main Window主窗口。
  

  • Dialog with Buttons Bottom（底部按钮的对话框）：
    这是一种对话框（Dialog）或模态窗口，通常用于显示某种信息、提示、警告或要求用户进行选择的窗口。
    在窗口的底部通常包含一个或多个按钮，如"确定"、“取消”、"应用"等，用于用户与对话框进行交互。
  • Dialog with Buttons Right（右侧按钮的对话框）：
    与前者类似，这也是一种对话框，但不同之处在于其按钮通常位于对话框的右侧，而不是底部。
    这种布局可能更适合某些情况，特别是当对话框内容需要更多的垂直空间时。
  • Dialog without Buttons（没有按钮的对话框）：
    这是一种对话框，通常用于向用户显示信息、警告或需要用户阅读而不需要操作的情况。
    与前两种对话框不同，它通常没有可操作的按钮。用户只需阅读对话框中的内容，然后可能关闭它。
  • Main Window（主窗口）：
    主窗口通常是应用程序的主界面，它包含应用程序的核心功能和导航元素。
    主窗口通常有菜单栏、工具栏、状态栏和中心部分的主要工作区域，可以包含各种其他部件和控件。
    主窗口用于承载应用程序的主要功能，用户与应用程序的大部分交互都在主窗口内进行。
  • Widget（小部件）：
    Widget是GUI应用程序中的一个通用术语，它指的是各种可视化和交互元素，如按钮、文本框、列表框、复选框等。
    Widget可以是单个控件，也可以是更复杂的组合，如包含多个控件的面板或窗口。
    Widget通常是应用程序界面的基本构建块。

二、更改窗口名称

点击对象检查器中的MainWindow

更改windowTitle属性即可，如下所示位置。

三、修改样式表

左边是控件栏，提供了很多空间类，比如常用的按钮、输入框、单选、文本框等等。我们均可以直接拖放到Main Window中。右边是对窗口及控件的各种调整、设置、添加资源（列如:图片）等。

• 这里我们拖入一个Frame容器（很多教程里会推荐使用Layouts相关组件，虽然Layouts可以自动布局，但无法对其修改样式，当然后续也可以对其进行变型再修改样式，过于繁琐，所以这里直接选择使用Frame），并命名为Main_QF，再右键点击空白处 -> 布局 -> 水平布局；

• 右键选中Main_QF -> 改变样式表， 这里分别对背景色、外边框和外边框圆角进行修改，添加下述代码后，点击应用即可查看效果。

  background-color: rgba(255, 255, 255, 240);
  border: 2px solid rgb(255, 255, 255);
  border-radius: 5px
  

  

• 再拖入Push Button组件到Frame容器中，并改名为btn_1，这时会发现btn_1按钮的样式与Main_QF的样式一致，拖入其他组件也是如此：
  

• 出现这种情况的原因是我们之前添加的样式表默认是对容器中所有组件的样式进行修改，若想要保持Button按钮原来的样式，我们只需在样式表中指定Main_QF进行修改，修改代码如下：

  QFrame#Main_QF {
  	background-color: rgba(255, 255, 255, 240);
  	border: 2px solid rgb(0, 0, 0);
  	border-radius: 5px
  }
  

  

• 按下快捷键 ctrl + R 可看当前效果。

• ctrl + S 进行保存，这里保存成main.ui文件。
  

四、UI文件转化为py文件

• 右键选中main.ui文件，选择 Pyside6 -> Pyside6-UIC
  
• 以下提示说明转换成功，同级目录下会多出一个main_ui.py文件
  

五、加载py文件显示窗口

• 新建一个app.py文件，作为GUI界面的启动文件。
  
• 输入下面的代码，执行即可。

  import sys
  from PySide6.QtWidgets import QMainWindow, QApplication
  
  from ui_main import Ui_MainWindow
  
  
  class MainWindow(QMainWindow, Ui_MainWindow):
      def __init__(self):
          super(MainWindow, self).__init__()
          self.setupUi(self)
  
  
  if __name__ == '__main__':
      app = QApplication(sys.argv)
      win = MainWindow()
      win.show()
      app.exec()