➣ Reading Time: 6 minutes

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

這次是我初學 PyQt5 的一些筆記,
每天都學一點點,至於整理的部分就慢慢一個個來
畢竟知道 PyQt5 有很多東西XD

此篇文章的範例程式碼 github

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

安裝

先安裝 Qt designer

連結:https://build-system.fman.io/qt-designer-download

  • 找到自己對應的版本下載

  • 安裝 (這邊以 windows 示範)

安裝完成,第一次執行 Qt designer

  • 打開來會發現這個畫面

這個畫面代表有不同的模板可以選擇,第一次我們先不管就選「Main Window」。

可以看到空白的畫面就這麼出來了!

建立文字框,開始我們的第一次 Hello World 吧!

拖曳左側的 Text Edit 至畫面中任意地方,建立文字框

點擊文字框兩下,進入編輯模式,輸入 Hello World!

輸入 Hello World! 的畫面可以參考這邊

存檔囉! 這就是我們的第一份有 UI 介面的程式

得到了 .ui 檔,我們現在要將他轉成 .py

我們在安裝 PyQt5 時就已經有安裝好了,我們可以直接在終端機下以下的指令

舉例:例如我想將剛剛儲存的 “test.ui” 轉換成 “UI.py”

範例程式碼

pyuic5 -x test.ui -o UI.py

說明

  • -x: 輸出為可單獨執行的檔案 (有 main 的部分),若無會只有單純封裝好的 UI class
  • -o: 輸出 .py 檔案

有沒有「-x」的差別:

紅色框 (我多框了 import 的部分,應該是沒有),就是封裝好的 UI class,
藍色框就是 main 的部分,正常來說我們應該是不會「單獨」執行介面,

單獨執行介面,就是一個只有畫面,不能動的東西XD
除了好看(?)之外,沒什麼好用的XD

如果我們沒有下「-x」,就不會有 main 的部分 (純封裝好的 UI,要另外 import 寫控制),
正常來講,除非只是想看顯示出來是怎麼樣,不然不會下「-x」這個 flag。

日後我們會更細部的來談這邊的架構,現在先知道差別即可。

執行

到這邊相信大家都懂了XD,就一如往常的執行這份 python 吧!

python UI.py

結果

看起來很簡單,不過這已經是我們設計一隻大型 Qt 程式重要的第一步囉!

Reference

⭐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 作為文字的輸入
5.【PyQt5】Day 10 – 以 QFileDialog 讀取系統的檔案、資料夾
⭐影像處理篇⭐:
1.【PyQt5】Day 11 – 以 Qlabel 在 PyQt 中顯示圖片 (基於 QImage 使用 OpenCV)
2.【PyQt5】Day 12 – 建立一個可以縮放圖片大小的顯示器 (基於 QImage 使用 OpenCV)
3.【PyQt5】Day 13 – 使用 QVBoxLayout, QscrollArea 製作出捲軸,以高解析度檢視圖片 (基於 QImage 使用 OpenCV)
⭐打包程式篇⭐:
1.【PyQt5】Day 3 – 用 pyinstaller 將 python 程式打包,把每天的成果分享給你的親朋好友
⭐【喜歡我的文章嗎? 歡迎幫我按讚~ 讓基金會請創作者喝一杯咖啡!
如果喜歡我的文章,請幫我在下方【按五下Like】 (Google, Facebook 免註冊),會由 「LikeCoin」 贊助作者鼓勵繼續創作,讀者們「只需幫忙按讚,完全不用出錢」哦!

likecoin-steps