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

前言

我們接下來的討論，會基於讀者已經先讀過我 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