【没钱买ps，PyQt自己写】Day 8 – 我们的第二个 input 手段 – QLineEdit

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

前言

我们接下来的讨论，会基於读者已经先读过我 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/day08_input_text

UI 设计部份 (UI.py)

Qt designer 部份

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

我们在 Input widgets 中找到 Line Edit，
拖曳至视窗自己喜欢的地方，

另外我们今天想实作一个小功能，结合昨天与前天的 day 6、day 7，
让我们「输入」的文字，可以藉由「点击按钮」，「显示」在画面的某处。

因此我们今天总共需要3个物件

QLineEdit：作为让我们输入文字的地方
QPushButtonl：作为按钮，可以点击执行任务
Qlabel：作为显示结果用

读者们可以开始自行设计自己的介面罗，以下为我的示范：

一样，我们可以修改物件的名称 (上图红框处) ，使我们在未来更容易识别是哪一个功能。这边作为示范就不改动了。
文字大小那些也都可以自己改。

转换成 UI.py

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

转换 day8.ui -> UI.py

pyuic5 -x day8.ui -o UI.py

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

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

看看我们制作出来的介面

python UI.py

看起来是不是很可爱(?)呢，有了介面，
接下来我们要开始实作功能面的事情。

controller 设计部份 (controller.py)

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

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

从 UI.py 中找出物件名称

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

这次我们有了3个东西罗！等等我们要让他们能互动起来
(为了示范，名称我都是用预设的没有改。)

self.pushButton：按钮
self.lineEdit：输入文字
self.label：输出画面

(务必记得名称，不然等等不知道要改谁XD)

取得名称後，去修改 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.ui.pushButton.clicked.connect(self.buttonClicked)

    def buttonClicked(self):
        msg = self.ui.lineEdit.text()
        self.ui.label.setText(msg)

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

在 setup_control() 中

self.ui.pushButton.setText('Print message!')：设定按键显示讯息
[重要] self.ui.pushButton.clicked.connect(self.buttonClicked)：当按键被触发时，要做 self.buttonClicked() 这个 function 里面的事情。