看完這篇文章你會得到的成果圖

前言

我們接下來的討論，會基於讀者已經先讀過我 day5 文章 的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

【PyQt5】Day 5 – 開始來設計我們的 controller.py，改以「程式角度」來說明如何建立 PyQt 的系統

此篇文章的範例程式碼 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() 的部份，完成我們按鈕的功能。

【注意】 QLineEdit, QTextEdit, QPlainTextEdit 使用函數的不同

如果想要讀取 QLineEdit 內的文字，
我們使用的是 「.text()」 的方式呼叫。

而如果是想要讀取 QTextEdit, QPlainTextEdit 內的文字，
我們使用的是 「.toPlainText()」 的方式呼叫。

所以如果出現 「AttributeError: ‘QTextEdit’ object has no attribute ‘text’」
就是上述的這個問題囉！

於是我們就完成我們今天的功能囉！

執行結果

照我們 day5 的程式架構，我們執行

python start.py

Reference

• QT中LineEdit TextEdit PlainTextEdit 这三个控件有什么区别，分别用在什么情况下呢

⭐Python PyQt5 相關文章整理⭐：
⭐基礎知識與架構篇⭐：
1.	【PyQt5】Day 1 – 安裝 PyQt，建立自己的第一支 PyQt5 程式
2.	【PyQt5】Day 2 – 利用 Qt designer 建立第一支有自己介面的 PyQt5 程式
3.	【PyQt5】Day 4 – 重要的 Qt 程式邏輯觀念，務必先有此觀念後面才會懂自己在幹嘛
4.	【PyQt5】Day 5 – 開始來設計我們的 controller.py，改以「程式角度」來說明如何建立 PyQt 的系統
⭐基本元件應用篇⭐：
1.	【PyQt5】Day 6 – 我們的第一個 output 手段 – Qlabel
2.	【PyQt5】Day 7 – 我們的第一個 input 手段 – QPushButton
3.	【PyQt5】Day 8 – 我們的第二個 input 手段 – QLineEdit
4.	【PyQt5】Day 9 – 以 QLineEdit, QTextEdit, QPlainTextEdit 作為文字的輸入
6.	【PyQt5】Day 14 - 使用 QSlider 製作可拖曳的滑條
8.	【PyQt5】Day 19 - 使用 QProgressBar，製作進度條的功能
⭐介面系統控制篇⭐：
5.	【PyQt5】Day 10 – 以 QFileDialog 讀取系統的檔案、資料夾
7.	【PyQt5】Day 18 / Project 使用 QTimer，自製碼表(計時器) PyQt5 stopwatch DIY
1.	【PyQt5】Day 20 - PyQt 最重要的 QThread 概念 / 為什麼 windows, mac, ubuntu (linux) 程式會「沒有回應」?
2.	【PyQt5】Day 21 – 透過 PyQt 實現滑鼠監聽總整理，完全掌握滑鼠控制 (listen mouse)
3.	【PyQt5】Day 22 – PyQt 視窗的個性化/屬性控制 setWindowFlags，禁止放大縮小、永遠顯示於最上層/最下層
4.	【PyQt5】Day 23 – 使用系統內建的調色盤 QColorDialog，來替我們選擇顏色 QColor (Color Picker)
5.	【PyQt5】Day 24 / Project 偵測滑鼠目前指示顏色的小工具 (滴管工具), 利用 QCursor 偵測滑鼠, QApplication 取得截圖
⭐影像處理篇⭐：
1.	【PyQt5】Day 11 – 以 Qlabel 在 PyQt 中顯示圖片 (基於 QImage 使用 OpenCV)
2.	【PyQt5】Day 12 – 建立一個可以縮放圖片大小的顯示器 (基於 QImage 使用 OpenCV)
3.	【PyQt5】Day 13 – 使用 QVBoxLayout, QscrollArea 製作出捲軸，以高解析度檢視圖片 (基於 QImage 使用 OpenCV)
4.	【PyQt5】Day 15 / Project 與檔案功能整合，製作出可讀取圖片並可縮放的 UI 介面 (使用 PyQt + OpenCV)
5.	【PyQt5】Day 16 - 在 PyQt5 中取得圖片座標 (滑鼠位置) mousePressEvent，觀察圖片在 Qt 中產生的方式，對原圖進行座標換算處理
6.	【PyQt5】Day 17 / Project 製作標註 roi 工具, 開始導入 OpenCV 作為繪圖引擎, 在圖上畫點並顯示座標
⭐project 篇⭐：
1.	【PyQt5】Day 25 / Project 自己做一個影片播放器 DIY video player (結合 PyQt + OpenCV)
2.	【PyQt5】Day 26 / Project 替我們影片播放器增加一個顯示進度的滑條 video player add slider (與昨日 bottleneck 處理細節)
3.	【PyQt5】Day 27 / Project 製作影片 ROI 標註工具 (PyQt 結合 OpenCV 在圖上畫點畫線)
4.	【PyQt5】Day 28 / final project – 1 來搞一個自己的 photoshop 吧！UI 篇 + 純程式架構篇 (結合 PyQt + OpenCV)
5.	【PyQt5】Day 29 / final project – 2 來搞一個自己的 photoshop 吧！後段程式細節篇 (結合 PyQt + OpenCV)
6.	【PyQt5】Day 30 / final project – 3 來搞一個自己的 photoshop 吧！把每個方法封裝起來製作出還原功能吧！ (結合 PyQt + OpenCV)
⭐打包程式篇⭐：
1.	【PyQt5】Day 3 – 用 pyinstaller 將 python 程式打包，把每天的成果分享給你的親朋好友
⭐【喜歡我的文章嗎? 歡迎幫我按讚~ 讓基金會請創作者喝一杯咖啡! 】 如果喜歡我的文章，請幫我在下方【按五下Like】 (Google, Facebook 免註冊)，會由 「LikeCoin」 贊助作者鼓勵繼續創作，讀者們「只需幫忙按讚，完全不用出錢」哦!