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

(没有，今天不写程序，但要讲重要观念XD)

PyQt 的程序逻辑

我特别作了一张图，方便初学者理解

之前我学的时候都没有找到类似的图，我看了一堆网路文章还是摸不着头绪...
只能说真的是前人种树後人乘凉XDD

先了解 介面 (UI, frontend)，跟控制 (backend) 的不同

类似的观念其实我们在 Day2 已经有提到过，
不过这次我们要来真正的讲我们到底在做什麽。

如果有接触一点网页开发，相信对於「前端、後端」这两个词都不陌生，

不过这里我简单说明一下，前端就是呈现的介面，他就是一个视觉上呈现的东西，
还需要後端去告诉他运作的逻辑，才会是一个完整的网页。

例如：我知道画面的某个地方有按钮(前端)，但按下按钮会发生什麽事情，就是交由(後端)去处理。

所以我们可以画出下面的这张图，
通常来说，一个功能设计分得够乾净的程序，
再依照我的取名习惯，我会将他分为 UI.py 与 controller.py 两个部分。

• UI.py
  • 代表的是介面，也可以写成单独执行，我们就只会看到使用者介面，而没办法进行任何的逻辑判断操作 (Day 2 提到过的，关於要不要下「-x」这个 flag 影响到的事情。)
• controller.py
  • 代表的是逻辑，通常单独执行也不知道你要控制的是啥，所以一定会搭配 UI 一起执行。

网路上有很多程序会把这两个混在一起，组成一支很大的「.py」，
我们都可以用这个概念去理解，
而混在一起变成一只并不代表不好，这只是一个「架构设计」的问题，
也许人家的程序很小，特别写成两份 「.py」 反而还嫌罗嗦呢!

Qt desinger 的功能

Qt desinger 的功能就是帮助我们设计出好看的 UI.py，
毕竟牵扯到「视觉设计」，如果这都还要靠写 code 直接刻出来... (太硬了啦!)

而且 Qt desinger 也很适合设计师使用，由设计师设计出精美的画面後，
再经由指令自动转换成 UI.py，最後我们就可能有相对美丽的介面罗!

转换的程序码，我也一并整理过来

我们储存的 Qt desinger 档案，副档名是 .ui
经由下面的转换，可以自动转换成 .py 的程序码

pyuic5 -x test.ui -o UI.py

(通常已经有设计好 controller.py 的程序，我们不会特别下「-x」，不让他可以单独执行)

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

概念图示如下：

撰写更巨大的系统程序

基於 UI.py, controller.py 两个概念，我们可以就开始无限的扩大我们的程序了!
像我们可以在 UI.py 新增按键或文字，并同时在 controller.py 撰写如何控制这些东西，
甚至是「按键与文字」如何互动，都可以撰写在 controller.py 里面，
让我们可以经由後端的逻辑，完全控制介面的变化。

因此，有了这个观念，相信接下来各路程序好手们，
我们就可以逐渐开发属於自己的超大型视窗程序了。

图示：

小结

今天我们知道非常重要的程序开发逻辑，
往後我们会不断地提到，现在是在设计「UI」，还是在设计「逻辑」，
两者虽然在开发时会并行，但绝不能混淆，
混淆的话之後学习一定会变得一团乱，就跟我之前初学 Qt 一样...

网路太多文章都会把「设计UI」、「设计逻辑」混在一起讲，
这并不是说他们有错，因为本来「设计一个新的 UI」，很自然接下来就会「设计对应此 UI 的逻辑」，

但以我们要「学习」的角度来看这个「结果」，
「设计UI」、「设计逻辑」混在一起看就是一团乱，
所以我之前才会学得超级痛苦 Q__Q，

这个概念往後务必在心中养成拆乾净的习惯，才会清楚现在的自己是在干嘛。

★ 本文也同步发於我的个人网站(会有内容目录与显示各个小节，阅读起来更流畅)：【PyQt5】Day 4 – 重要的 Qt 程序逻辑观念，务必先有此观念後面才会懂自己在干嘛