【没钱买ps，PyQt自己写】Day 7 – 我们的第一个 input 手段 - QPushButton

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

前言

我们接下来的讨论，会基於读者已经先读过我 day5 文章的架构下去进行程序设计
如果还不清楚我程序设计的逻辑 (UI.py、controller.py、start.py 分别在干麻)
建议先阅读 day5 文章後再来阅读此文。

https://www.wongwonggoods.com/python/pyqt5-5/

此篇文章的范例程序码 github

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

UI 设计部份 (UI.py)

Qt designer 部份

一样先打开我们的 Qt designer，
这篇我们要介绍的是 QPushButton，
作为我们第一个「input」用的功能。

这边讲的「input」，是广义的「input」，也就是任何输入进我们程序的讯号，
反之，「output」，就是指任何从我们程序输出的讯号

我们在 Buttons 中找到 Push Button，
拖曳至视窗自己喜欢的地方，就完成今天的设计罗！

一样，我们可以修改物件的名称，使我们在未来更容易是哪一个功能。

转换成 UI.py

一样的编译指令，我们加上 -x (也可不加)，
我们就可以先检视看看转换後的视窗是不是跟我们想像的一样。

转换 day7.ui -> UI.py

pyuic5 -x day7.ui -o UI.py

执行看看 UI.py 画面是否如同我们想像

一样，这程序只有介面 (视觉上的呈现)，没有任何互动功能

看看我们制作出来的介面

python UI.py

看起来符合我们的想像就没问题了。

controller 设计部份 (controller.py)

接下来，我们必须先研究一下我们刚刚的程序，
把我们刚刚程序中的「物件名称」找出来。

名称也可以自己在设计 Qt desginer 时设定，可以看上一个 part 我有框起来的部份。

从 UI.py 中找出物件名称

如果读者使用的是预设的名称，应该会在刚转换完成的 UI.py 中找到以下这段，

我们发现我们刚刚的 Push Button 名称为 pushButton，
(注意大小写，这可能导致程序错误。)
当然，这绝对不是一个好名称，不过这边作为示范，我们就不多做改动。

取得名称後，去修改 controller.py

还记得我们在 day5 中的模板吗？这边我们直接复制过来使用并修改。

from PyQt5 import QtWidgets, QtGui, QtCore

from UI import Ui_MainWindow

class MainWindow_controller(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        # TODO
        # qpushbutton doc: https://doc.qt.io/qt-5/qpushbutton.html
        self.ui.pushButton.setText('Print message!')
        self.clicked_counter = 0
        self.ui.pushButton.clicked.connect(self.buttonClicked)

    def buttonClicked(self):
        self.clicked_counter += 1
        print(f"You clicked {self.clicked_counter} times.")

我们在新增或修改了 setup_control(), buttonClicked() 这两个部份

在 setup_control() 中

self.ui.pushButton.setText('Print message!')：将按钮修改为 "Print message!"
self.clicked_counter = 0，设定一个储存我们现在按了按钮几次的变数
[重要] self.ui.pushButton.clicked.connect(self.buttonClicked)，连结 self.buttonClicked() 这个 function，使当按钮被按下时，能够执行 function 里面的功能。

在 buttonClicked() 中

这里我们要定义的是按钮被按下时，会执行的事件内容，
这里作为示范，我们写的很简单，
用 self.clicked_counter += 1，更新点击的次数，
并用 print(f"You clicked {self.clicked_counter} times.")，
在 terminal 上印出现在点击的次数。