使用 PyDracula 制作 GUI

简介

PyDracula 项目地址：Wanderson-Magalhaes/Modern_GUI_PyDracula_PySide6_or_PyQt6 (github.com)

效果图

非常好看的一个界面，我们可以使用它来制作自己需要的GUI

准备工作

环境

• 操作系统：kali linux
• 编辑器：VS code
• Python版本： 3.9.2 64-bit
• 依赖包：PySide6
  • 使用pip安装：pip install --user PySide6
  • designer位置：~/.local/lib/python3.9/site-packages/PySide6/designer
  • uic位置：~/.local/lib/python3.9/site-packages/PySide6/Qt/libexec/uic
  • rcc位置：~/.local/lib/python3.9/site-packages/PySide6/Qt/libexec/rcc

简单运行

我们直接将项目clone下来，在环境准备好的前提，我们可以直接运行main.py

git clone https://github.com/Wanderson-Magalhaes/Modern_GUI_PyDracula_PySide6_or_PyQt6.git
/bin/python3 /Modern_GUI_PyDracula_PySide6_or_PyQt6/main.py

基本使用

文件结构

• main.py: 应用程序初始化文件
• main.ui: Qt Designer 界面项目
• resouces.qrc: Qt Designer 资源，可以在这个文件添加你的资源，可以在 resource browser看到改动
• setup.py: 安装 cx-Freeze 编译应用程序（为 Windows 配置）
• themes/: 在该目录添加 .qss 主题文件，目前有 light 和 dark 两种主题。
• modules/: 运行 GUI 需要的一些模块
  • modules/app_funtions.py: 在该文件添加应用程序功能，添加到 main.py
  • modules/app_settings.py: 用于配置用户界面的全局变量
  • modules/resources_rc.py: 使用命令 ~/.local/lib/python3.9/site-packages/PySide6/Qt/libexec/rcc resources.qrc -o resources_rc.py -g python 生成，供 ui_main.py使用
  • modules/ui_functions.py: 此处仅添加与用户界面/GUI相关的功能。
  • modules/ui_main.py: 与Qt Designer导出的用户界面相关的文件
• images/: 在给 resouces.qrc 添加资源之前，将所有的图片图标放在这个文件夹下面

实践

通过以下内容学习：

• youtube视频：https://youtu.be/9DnaHg4M_AM

• 结合项目Readme和源码注释

首先用Qt designer打开main.ui

~/.local/lib/python3.9/site-packages/PySide6/designer main.ui

接下来介绍几个必要的修改

添加新界面

通过stackedWidget控件After Current Page添加页面：

在一个新的界面中不能直接复制别的控件，只能在该界面中去通过Ctrl+拖动复制

然后添加一个label控件，写上页面标签内容，这样就可以改变页面的布局了

main.ui生成ui_main.py

生成并替换module/ui_main.py之后，修改导入库（否则报错），运行main.py，此时应该成功显示界面。

切换界面

界面需要通过不同的按钮来切换选择，所以我们需要添加Pushbutton，这个可以直接复制

然后修改按钮的名字，生成并替换module/ui_main.py，此时应该正常运行，但是没有功能。

最后添加切换界面功能：

首先，mian.py文件中添加信号clicked和槽函数self.buttonClick

意思就是，ui的btn_home按钮一旦接受到clicked点击信号，那么就会通过connect调用槽函数self.buttonClick

调用设置好之后，我们具体写self.buttonClick到底该干什么，我们找到函数

可以看到函数通过if语句选择显示界面，显示home界面为例，先通过stackedWidget控件的setCurrentWidget方法设置界面为home，这个home，就是我们在designer添加的页面名。

资源文件以及图片切换

我们从文件结构中知道main.ui使用的资源文件是resouces.qrc，我们看下内容是什么

qresource标签的prefix属性是资源浏览器分类目录，比如file标签是文件路径，如图所示

如何切换图片？我们要知道如何显示一个图片

比如home中的大图，这是通过home的styleSheet属性添加的

比如按钮的小图标，也是通过styleSheet属性添加的

所以我们要修改这个图片只需要选择资源，然后copy path，将它写到styleSheet中，就完成了

最后为了让python文件使用资源，需要使用qcc生成resources_rc.py

# -o resources_rc.py
# -g python ，默认生成c++ code
~/.local/lib/python3.9/site-packages/PySide6/Qt/libexec/rcc resources.qrc -o resources_rc.py -g python

添加功能

添加功能有很多方法，但是原理是一样的：

第一种，类似切换界面功能一样添加，这种是调用了作者已经写好的一个buttonClick函数，然后在modules/app_funtions.py文件添加具体功能。

举例：给btn_save按钮添加test功能

前面不再赘述，可以看到，按下按钮会调用一个test函数，参数是self.ui也就是全局变量widgets

然后打开modules/app_funtions.py，我们写上test函数定义

self参数就是前面的widgets，creditsLabel是一个标签控件，可以看到我们成功输出了内容

这种方法作者推荐的，比较条理，好看懂。

第二种，直接在main.ui中添加信号和槽，然后在main.py中具体去写槽函数

举例：给加密按钮添加DES_encrypt槽函数

如图所示，添加信号和槽

成功之后在View中选择Signal/Slot Editor查看

生成ui_main后在main.py直接写函数

原理是一样的，只是clicked.connect不在main.py而是在ui_main.py中，这种方法偏向designer设计（其实是之前没看懂作者的意思）

总结

其实还有很多没有去写，作者提供的Setting参数，qss主题替换（这个视频里有），但是大体上完成一个GUI是够了。

具体布局还要自己去设计，要想设计好看，一定要看控件属性，比如styleSheet、·maximusize、holdertext等等。

希望大家都能设计出好看的GUI，我们的最终效果如下