看完这篇文章你会得到的成果图

这次是我初学 PyQt5 的一些笔记，
每天都学一点点，至於整理的部分就慢慢一个个来
毕竟知道 PyQt5 有很多东西XD

此篇文章的范例程序码 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day02_qt_designer

安装

先安装 Qt designer

连结：https://build-system.fman.io/qt-designer-download

• 找到自己对应的版本下载

• 安装 (这边以 windows 示范)

安装完成，第一次执行 Qt designer

• 打开来会发现这个画面

这个画面代表有不同的模板可以选择，第一次我们先不管就选「Main Window」。

可以看到空白的画面就这麽出来了!

建立文字框，开始我们的第一次 Hello World 吧!

拖曳左侧的 Text Edit 至画面中任意地方，建立文字框

点击文字框两下，进入编辑模式，输入 Hello World!

输入 Hello World! 的画面可以参考这边

存档罗! 这就是我们的第一份有 UI 介面的程序

得到了 .ui 档，我们现在要将他转成 .py

我们在安装 PyQt5 时就已经有安装好了，我们可以直接在终端机下以下的指令

举例：例如我想将刚刚储存的 "test.ui" 转换成 "UI.py"

范例程序码

pyuic5 -x test.ui -o UI.py

说明

• -x: 输出为可单独执行的档案 (有 main 的部分)，若无会只有单纯封装好的 UI class
• -o: 输出 .py 档案

有没有「-x」的差别：

红色框 (我多框了 import 的部分，应该是没有)，就是封装好的 UI class，
蓝色框就是 main 的部分，正常来说我们应该是不会「单独」执行介面，

单独执行介面，就是一个只有画面，不能动的东西XD
除了好看(?)之外，没什麽好用的XD

如果我们没有下「-x」，就不会有 main 的部分 (纯封装好的 UI，要另外 import 写控制)，
正常来讲，除非只是想看显示出来是怎麽样，不然不会下「-x」这个 flag。

日後我们会更细部的来谈这边的架构，现在先知道差别即可。

执行

到这边相信大家都懂了XD，就一如往常的执行这份 python 吧!

python UI.py

结果

看起来很简单，不过这已经是我们设计一只大型 Qt 程序重要的第一步罗!

Reference

• PyQt 入门，用 Python 写第一支 GUI

★ 本文也同步发於我的个人网站(会有内容目录与显示各个小节，阅读起来更流畅)：【PyQt5】Day 2 – 利用 Qt designer 建立第一支有自己介面的 PyQt5 程序