本章目标

• GUI与PyQt5
• 在PyCharm中配置PyQt5环境
• 认识Qt Designer
• 使用Qt Designer创建窗口

一、GUI与PyQt5

• 图形用于接口或者图形用户界面，它是Graphical User Interface的简称
• GUI是一种人与计算机通信的界面显示格式，允许用户使用鼠标等输入设备对计算机进行操作

二、在PyCharm中配置PyQt5环境

1、PyQt5的模块及相关模块的安装

pip install PyQt5

pip install PyQt5 -i https://pypi.tuna.tsinghua.edu.cn/simple

pip install pyqt5-tools

pip install pyqt5-tools -i https://pypi.tuna.tsinghua.edu.cn/simple

pip install pyqt5designer

pip install pyqt5designer -i https://pypi.tuna.tsinghua.edu.cn/simple

安装完成后可以使用pyqt5-tools designer验证 Designer 是否安装成功

2、PyCharm配置PyQt5

Qt Designer 配置

名称：Qt Designer
工具设置
    程序：E:\Python3.10.3\Lib\site-packages\QtDesigner\designer.exe  #此处路径为designer.exe的路径
    工作目录：$ProjectFileDir$

打开设置–>工具–>外部工具–>添加文件(点击加号)

找到designer.exe对应的路径，复制后粘贴到 工具设置–>程序 手动补充designer.exe
工作目录填写系统默认变量 :$ProjectFileDir$
完成之后点击 确认

完成之后就会出现外部工具 Qt Designer ，点击应用，然后点击确认。

在菜单栏 工具 外部工具 中就会看到 Qt Designer

PyUIC配置

此配置将.ui文件转换.py文件

名称:PyUIC
工具设置
	程序：E:\Python3.10.3\python.exe  #此处路径为python解释器的路径
    实参：-m PyQt5.uic.pyuic $FileName$ -o $FileNameWithoutExtension$.py  #将.ui文件转换为.py文件的命令
    工作目录：$FileDir$

按照上述命令进行配置，完成后在 外部工具 中查看配置是否完成

Pyrcc配置

名称：Pyrcc
工具设置
    程序：E:\Python3.10.3\Scripts\pyrcc5.exe  #此处路径为pyrcc5转换器的路径
    实参：$FileName$ -o $FileNameWithoutExtension$_rc.py 
    工作目录：$FileDir$

按照上述命令进行配置，完成后在 外部工具 中查看配置是否完成

至此，安装和配置结束

三、认识Qt Designer

新建一个窗体

工作界面介绍：

• 位于左上方的“Widget Box”包含了各种可以自由拖动的组件；
• 位于界面中央的“MainWindows - untitled”就是你可以设计的画布；
• 位于右上方的“对象查看器”可以查看当前ui的结构；
• 位于右侧中央的“属性编辑器”可以设置选中组件的属性；
• 位于右下方的“资源浏览器”可以添加各种素材，比如图片、背景等等。

四、使用Qt Designer创建窗口

1、新建窗口

2、对象查看器

3、属性编辑器

对象名称设置：

• 窗口的唯一标识器，通过这个属性调用窗口，默认值是mainWindows，
  

窗口名称设置：

• PyQt5属性命名规则，驼峰型。例：windowTitle。

图标设置:

• 准备.ico文件，在windowIcon属性设置
  

窗体背景设置:

• 资源浏览器–>点击资源编辑(小笔)–>新建资源文件–>设置文件路径–>输入名称(img)–>添加前缀(png)–>添加文件
  

在styleSheet设置窗体背景:

• 添加资源–>border-image–>点击确定，图片背景即添加成功

• 点击保存后，会生成.ui和.qrc两个文件
  选中.qrc文件，使用扩展工具转换，生成img_rc.py文件。

控件设置 信号与槽:

• 选中按钮–>点击工具栏 编辑信号/槽–>拖动按钮，会出现配置连接窗体 -->勾选从Qwidget继承的信号和槽 -->选择cliked()单击信号–>close()槽函数

选择cliked()单击信号–>close()槽函数

选择cliked()单击信号–>close()槽函数