Product: Qt Creator 14.0.1
Based on: Qt 6.7.2 (MSVC 2019, x86_64)
Built on: Aug 6 2024 00:17:40
From revision: b567160861


依次点击下图所示选项

1.2 在你的qt creator里面添加你的python版本
在你的项目的,【构建】里面,右键,打开【管理构建套件】

这里面,找到python选项,

选取使用在Vscode 中使用 Miniconda 创建好的环境中的 Python 解释器(一般在 .conda 目录下)

在 Name 栏目把名字改成 Miniconda 创建时使用的版本,然后点击右下角的应用

此时你返回 Kit 条目配置界面,你会发现多了一项条目

点击如图所示按钮

选择创建的项目类型

然后返回你的 Vscode 创建一个空项目,我创建的空项目目录和默认文件如下(在这里我已经配置好了Miniconda的虚拟python开发环境)

在项目导航栏中建立一个你用于存放 QtCreator项目的目录(我这里是上面图中的 app 目录),然后复制其文件路径

完成后 QtDesigner 的创建界面如下

选择PySide6点击下一步

勾选之前添加的 Python 解释器,然后取消勾选使用虚拟环境

关于 Git 的选择,这里选择 None ,因为我们在 Vscode 中进行项目控制,点击下一步,项目初始化如下

点击上横幅中的两个 install ,等待终端出现如下标志

在项目中随便新建一个untitled.ui
文件

点击该文件,就会自动进入Qt Designer 界面

点击该按钮可以退出出图形编辑模式

编辑好后在Vsocde
的终端输入如下命令(Qt Creator 似乎没有设计一个按钮把 ui 文件转换为 Python 代码)
pyuic5 -o main.py untitled.ui # 注意你执行命令时候所在的文件夹

在 Qt Designer 中打开 main.py
在末尾处加入
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
ui = Ui_MainWindow()
ui.setupUi(MainWindow)
MainWindow.show()
sys.exit(app.exec_())

点击左下角的运行,查看效果若如下,QtDesigner 的基本使用到此结束

3)Vscode

2.配置 Qt Extension Pack 扩展
ctrl+shift+p,输入Qt:scanf for kit 后回车

ctrl+shift+p,输入Qt😮pen Qt Settings 回车,找到 Qt-core 项,然后把 Qt 安装的根目录复制进去(注意,路径符需要从\
换成/
)

ctrl+shift+p,输入Qt😮pen Widget Designer 后选择当前被发现的 Qt 工具链

等待片刻后出现如下所示界面

随便创建一个窗口后保存窗口 ui 文件到你之前在vscode中创建的 app/appv1目录下,此时这个目录下文件应该有下图所示的这些文件

3. 在 Vscode 中完成 GUI 开发Python
依次点击如下图所示按钮,进入Qt Widget Designer

在该窗口中编辑控件,完成后按下 ctrl+s
保存

编辑完成后依次点击 Form-View Python Code 预览 Python 源代码
|
|
<br> |
| -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
点击左上角的复制按钮,把代码粘贴到 Vscode 中的main.py 中

在代码末端加入如下代码,要不然程序找不到运行入口点
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
ui = Ui_MainWindow()
ui.setupUi(MainWindow)
MainWindow.show()
sys.exit(app.exec_())
点击左上角的运行查看效果,若出现如下述右图所示的窗口,则本小节教程到此结束。
|
<br> |
<br> |
| ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
相比在 Qt Designer 中开发的方式,我更倾向于后者插件式开发,因为比较方便。Vsocde 也可以一样可以在终端执行下述命令去把 ui 文件转换为 Python 代码,然后在末尾补上上文所述述代码。
pyuic5 -o main.py untitled.ui # 注意你执行命令时候所在的文件夹
# main.py untitled.ui 可能得根据实际你的情况更改
4. 使用 Fluent Design 风格的 Widget 组件库开发(可跳)
4.1. 简介
这是一个使用 PyQt/PySide 编写的 Fluent Design 风格的组件库,支持亮暗主题无缝切换和自定义主题色,搭配 QtDesigner 可以快速开发美观的界面。 Github仓库地址 ,演示视频可以在哔哩哔哩上观看。

<center><b>表:widget 控件一览</b></center>
由于笔者的 Python 版本是 3.12 对 PyQt5/Qt6 适配不好,所以用 PySide6 库了(需要科学环境+PiP 安装代理设置好)
轻量版 (AcrylicLabel
不可用):
pip install PySide6-Fluent-Widgets -i https://pypi.org/simple/
完整版:
pip install "PySide6-Fluent-Widgets[full]" -i https://pypi.org/simple/
如果项目中使用的是 PySide2、PySide6 或者 PyQt6,可以在 PySide2、PySide6 和 PyQt6 分支下载对应的代码。
注意: 请勿同时安装 PyQt-Fluent-Widgets、PyQt6-Fluent-Widgets、PySide2-Fluent-Widgets 和 PySide6-Fluent-Widgets,因为他们的包名都是 qfluentwidgets
。
提示: 其他 GUI库对应的安装命令在安装 | QFluentWidgets中找

安装完 pyqt-fluent-widgets 包并且下载好仓库源代码之后,可以切换到 examples
目录下运行示例代码,比如封面对应的示例代码:
cd examples/settings
python demo.py
如果遇到 ImportError: cannot import name 'XXX' from 'qfluentwidgets'
,这表明安装的包版本过低。可以按照上面的安装指令将 pypi 源替换为 https://pypi.org/simple 并重新安装.
建议在使用之前阅读一下在线帮助文档,里面介绍了使用这个组件库的正确姿势:文档地址
在 Qt Designer 中,有两种使用 PyQt-Fluent-Widgets 的方式。
- 第一种方法是在控件中提升类
- 右击一个小部件,选择右击菜单上的提升为, 是把原生部件替换成自定义小部件,在这个例子中是
qfluentwidgets.PushButton

- 弹出的对话框上需要填写自定义的组件名。头文件是组件库的包名
qfluentwidgets
,提升的类名称为 PushButton
。

- 完成提升后不会在设计师中看到任何变化,保存 ui 文件后编译为 py 代码,可以发现
import
的是 PushButton
- 第二种方法是使用插件。(这个打包了FluentWidgets的Qt Designer是收费的,没钱用方法一)
运行 python ./tools/designer.py
来启动设计师软件(必须使用脚本启动)
一切无误的情况下能在侧边栏 Widget Box 中看到 PyQt-Fluent-Widgets 的组件。
