iT邦幫忙

2021 iThome 鐵人賽

DAY 2
1
Software Development

【今年還是不夠錢買psQQ,不如我們用PyQt自己寫一個】系列 第 2

【沒錢買ps,PyQt自己寫】Day 2 - 利用 Qt designer 建立第一支有自己介面的 PyQt5 程式

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

https://ithelp.ithome.com.tw/upload/images/20210917/20120424TTcp64aY7f.png

這次是我初學 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

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

https://ithelp.ithome.com.tw/upload/images/20210917/20120424pO3dcCq9RR.png

  • 安裝 (這邊以 windows 示範)

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

  • 打開來會發現這個畫面

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

https://ithelp.ithome.com.tw/upload/images/20210917/20120424EbIeVexRzj.png

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

https://ithelp.ithome.com.tw/upload/images/20210917/20120424VyGREnUYhH.png

建立文字框,開始我們的第一次 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


★ 本文也同步發於我的個人網站(會有內容目錄與顯示各個小節,閱讀起來更流暢):【PyQt5】Day 2 – 利用 Qt designer 建立第一支有自己介面的 PyQt5 程式


上一篇
【沒錢買ps,PyQt自己寫】Day 1 - 安裝 PyQt,建立自己的第一支 PyQt5 程式
下一篇
【沒錢買ps,PyQt自己寫】Day 3 - 用 pyinstaller 將 python 程式打包,把每天的成果分享給你的親朋好友
系列文
【今年還是不夠錢買psQQ,不如我們用PyQt自己寫一個】30

尚未有邦友留言

立即登入留言