【没钱买ps，PyQt自己写】Day 9 - 以 QLineEdit, QTextEdit, QPlainTextEdit 作为文字的输入

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

前言

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

介绍 QLineEdit, QTextEdit, QPlainTextEdit

我们在 day8 中已经有介绍过 QLineEdit 的使用方法，
与 QLineEdit 类似的还有 QTextEdit, QPlainTextEdit，
今日我们一并介绍。

QLineEdit：特色是单行的文字输入，通常会使用於帐号、密码或 email 等等，大概只需要一行文字输入的地方。
QTextEdit：特色是多行的文字输入。
QPlainTextEdit：特色也是多行的文字输入，基本上与 QTextEdit 功能相同。

我们一般使用上会使用 QTextEdit 作为文字显示
使用 QPlainTextEdit 来进行文字 input 处理

UI 设计部份 (UI.py)

Qt designer 部份

一样先打开我们的 Qt designer，
这次我们建立三行input、按钮、与显示文字，
分别对应各自的结果。

我们在 Input widgets 中找到 LineEdit, TextEdit, PlainTextEdit，
拖曳至视窗自己喜欢的地方，

我们今天想实作一个小功能，是昨天 day 8 的延伸练习，
让我们「输入」的文字，可以藉由「点击按钮」，「显示」在画面的某处。

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

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

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

这边我极度建议要修改物件的名称 (上图右上角红框处)，等等我们撰写 controller.py 功能的时候，才不会要在那边认说 label_1、label_2、label_3 谁是谁。

另外我们这边直接在介面上修改了预设的文字，(点两下即可直接编辑)，
其实这与前几天我们在 controller.py 的作法也是相同的，只是这次我们把 setText 的功能搬至 UI.py 中，让 UI.py 直接完成介面 initialize 的工作。

转换成 UI.py

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

转换 day9.ui -> UI.py

pyuic5 -x day9.ui -o UI.py

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

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

看看我们制作出来的介面

python UI.py

我们稍微阅读一下转换出来的 UI.py 的程序码，
我们就会发现与前几天不同的地方，
也就是我们在 UI.py 完成的初始化部份。

物件名称更改部份

稍微注意一下就会发现，
我们刚刚在 Qtdesigner 修改的内容，直接反应在 class 的成员名称上，
另外 setObjectName 也同步被改动了，总共有这两个变化。

初始化内容部份

这部份我们在 UI.py 中发现了多了 retranslateUi() 这个 function，
里面有一连串的名称变换，完成我们刚刚设定的文字初始化。

controller 设计部份 (controller.py)

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

从 UI.py 中找出物件名称

毕竟我们刚刚已经先改过了变数名称，这边就方便了！

我们这边先把变数名称列出来，方便我们之後设定。

QLineEdit 部份
- 输入：self.box_line
- 按钮：self.button_line
- 显示：self.label_line (上面的图片我是我修改前的结果，修改後应该会是这个名称)
QTextEdit 部份
- 输入：self.box_text
- 按钮：self.button_text
- 显示：self.label_text
QPlainTextEdit 部份
- 输入：self.box_plain
- 按钮：self.button_plain
- 显示：self.label_plain

(务必记得名称，不然等等不知道要改谁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
        self.ui.button_line.clicked.connect(self.buttonClicked_line)
        self.ui.button_text.clicked.connect(self.buttonClicked_text)
        self.ui.button_plain.clicked.connect(self.buttonClicked_plain)

    def buttonClicked_line(self):
        msg = self.ui.box_line.text()
        self.ui.label_line.setText(msg)

    def buttonClicked_text(self):
        msg = self.ui.box_text.toPlainText()
        self.ui.label_text.setText(msg)

    def buttonClicked_plain(self):
        msg = self.ui.box_plain.toPlainText()
        self.ui.label_plain.setText(msg)

我们修改了 setup_control()，使按钮能够连接对应的 function，
并新增了buttonClicked_line(), buttonClicked_text(), buttonClicked_plain() 的部份，完成我们按钮的功能。