[Python 練習筆記] PySide6 做一個簡單的GUI Application #1：規格與準備

如同標題「做一個簡單的GUI Application」，筆記將會以一個簡單的應用程式為主幹，講解途中如何用到 PySide 來實現程式功能。

我想要應用程式要有什麼功能：

預想成果為一桌面應用程式，其功能為簡易圖片編輯。 功能為這三項：

1. 載入、顯示、儲存圖片
2. 轉為黑白圖片
3. 裁剪圖片

就這些？甚至第1點都算不上圖片編輯，太簡易了吧？夠簡易了吧！

這三點可以直接透過如 PIL 等 python 套件完成，代碼也只需短短幾行。 而 UI 即使用者界面部份，則可以用 Qt Designer 方便快速又直觀的來完成。

Qt Designer 是啥？又冒出新名詞 = =

Qt Designer 是一個用於設計 Qt 應用程式使用者界面的圖形化工具。

它提供了一個直觀的方式來設計和佈局使用者界面，使用者可以通過拖拽和放置元件來建立視窗。

在 Qt Designer 中設計好的界面可以導出為.ui檔，然後可以在 Python 程式中載入並進一步處理。

.ui 檔案？

就是用來保存這些設計好的介面的檔案，它裡面其實是一堆文字，裡面包含了介面的結構、元件的位置、樣式、顏色等等。它類似於 XML，但是它是特定給 Qt 使用的格式。

還沒看過、開啟、使用過 Qt Designer，所以可能會花一堆時間在上面？不用擔心，你只要看過一眼 Qt Designer 的程式界面就能快速上手。（可以先往下滑，看一下範例圖）

再加上我的設定目標功能不多，幾個 Label、Button 就能足夠顯示或傳遞所需要的資訊，除非是想特別美化，不然花不了什麼時間。

做好準備：

首先要做的第一件事為：建一個新資料夾來放code和檔案。

喔，沒有，沒有很多，全部也才三、四個檔案而已，但將它們整理後看起來乾淨也方便管理。

畢竟我覺得兩個桌面當中至少要有一個是比較整潔的。

講了那麼多，Qt Designer 要在那下載？ 哦～ 不用下載。它在你執行pip install PySide6 一同跟著下載了。

放在哪？ 一般來說在你安裝 Python 的資料夾底下 /Lib/site-packages/PySide6/ 處： [1]

看要不要建個捷徑到桌面。

簡單測試：

接著我們來試著建一個 .ui 檔來測試能不能正常使用。

一進程式會跑出這個頁面，來，看中間視窗左上角。我們這裡選 Main Window。

繃！視窗就出現了。

左手邊不是有一堆零件嗎？找到 Push Button 或 Label ，左鍵按住，拖到中間視窗裡。

很直觀吧！

現在你八成已經自己在到處開擺了。哦，要改顯示的文字？

一、對部件裡文字點兩下就能改了。 二呢，先點擊你要操作的部件，接著看往右手邊，是不是有一堆表格，在裡面找到「text」這個屬性，點一下就可以改了。

你先這樣，再那樣，最後再這樣。改好了吧！

擺的差不多了，那來存個檔吧。crtl + s 或是你想左上角 File -> Save 都行，把它放到一開始建的資料夾裡。

喔天阿，拜託別叫它 untitled.ui 或是 123.ui，請替它取個合適且易於辨識的名字。這點在之後為變數、函數命名的時候也一樣。

若至此都沒問題，那這篇筆記到此告一段落。

下一篇筆記主要內容：介紹怎麼用 python 來開啟界面，以及大略講解 Qt Designer 中我所使用到的功能。

其他：

[1]：如果是 Linux，Qt Designer 一樣在安裝 PySide6 時一同下載了。使用命令行指令 pyside6-designer即可開啟 Qt Designer。

[2]：筆記裡提到的部件、零件、元件這些名詞，我指的都是「widget」。

「widget」是指在 Qt Designer 中的各種元件，例如按鈕、標籤、文本框等。 這些元件是用於構建使用者界面的基本元素，可以在視窗中放置和使用。每個 widget 都有自己的屬性和功能，我們可以透過 Qt Designer 以及程式碼來配置它們的外觀和行為。

感謝閱讀。

上一篇： [Python練習筆記] PySide6做一個簡單的GUI Application #0：簡介與設定 下一篇：[Python 練習筆記] PySide6 做一個簡單的GUI Application #2：顯示UI