看完這篇文章你會得到的成果圖
前言
我們接下來的討論,會基於讀者已經先讀過我 day5 文章 的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。
【PyQt5】Day 5 – 開始來設計我們的 controller.py,改以「程式角度」來說明如何建立 PyQt 的系統
此篇文章的範例程式碼 github
https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day10_open_file
以 QFileDialog 讀取系統的檔案、資料夾
我們可以使用 QFileDialog 來開啟每個作業系統的檔案功能,
這部分我們會在 controller.py 當中進行實作。
UI 設計部份 (UI.py)
這次我們設計兩個按鈕,與對應的顯示檔案路徑的地方,
這次我們使用 QTextEdit 來幫助我們顯示路徑
(相對 Qlabel 的好處是,如果文字太長的話,會自動換行)
一樣記得改一下變數,不然等等容易搞不清楚誰是誰。
而今天的 UI 設計部份就比較簡單,
因為等等的檔案處理我們會花比較多一點時間來實作。
轉換成 UI.py
一樣的編譯指令,我們加上 -x (也可不加),
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。
轉換 day10.ui -> UI.py
pyuic5 -x day10.ui -o UI.py
執行看看 UI.py 畫面是否如同我們想像
一樣,這程式只有介面 (視覺上的呈現),沒有任何互動功能
- 看看我們製作出來的介面
python UI.py
接下來我們要開始去改變裡面的內容。
controller 設計部份 (controller.py)
設定開啟 檔案/資料夾 的功能
接下來我們想藉由按鍵來觸發開啟 檔案/資料夾 的功能,
我們呼叫 QFileDialog 來協助完成這個功能,
在這個功能的底層,已經有針對不同作業系統實作對應開啟檔案的功能。
請不要只看表面誤會以為 Windows, Mac, Linux 開啟檔案都是同一種實作方式
實際上這部份依據不同作業系統的實作是在 Qt 底層已經做掉了,我們才能如此方便。
先從 UI.py 取得變數名稱 (也是我們剛剛在 Qt designer 中命名的部份)
這次我們的變數有
兩個按鈕
- self.file_button
- self.folder_button
兩個顯示路徑用方框 (QTextEdit)
- self.show_file_path
- self.show_folder_path
取得名稱後,去修改 controller.py
還記得我們在 day5 中的模板嗎?這邊我們直接複製過來使用並修改。
from PyQt5 import QtCore, QtWidgets
from PyQt5.QtGui import QImage, QPixmap
from PyQt5.QtWidgets import QFileDialog
import cv2
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):
self.ui.file_button.clicked.connect(self.open_file)
self.ui.folder_button.clicked.connect(self.open_folder)
def open_file(self):
filename, filetype = QFileDialog.getOpenFileName(self,
"Open file",
"./") # start path
print(filename, filetype)
self.ui.show_file_path.setText(filename)
def open_folder(self):
folder_path = QFileDialog.getExistingDirectory(self,
"Open folder",
"./") # start path
print(folder_path)
self.ui.show_folder_path.setText(folder_path)
setup_control() 修改的部份
- 「self.ui.file_button.clicked.connect(self.open_file) 」、「self.ui.folder_button.clicked.connect(self.open_folder)」:我們分別設定對應要使用的函數名稱,等等會去 call 我們寫好開啟 檔案/資料夾 的 function
open_file() 的部份 (開啟檔案)
- filename, filetype = QFileDialog.getOpenFileName(self, “Open file”, “./”)
我們可以直接使用 QFileDialog.getOpenFileName 這個已經設定好的函式,
直接幫助我們完成開啟檔案的功能,
而不同作業系統的問題,在這個功能的底層已經幫我們處理掉了,我們可以直接使用。
“Open file” 是開始視窗後上方標題列的名稱,
“./” 代表從哪裡開啟這個目錄,「”./”」就是當前目錄
這裡會回傳兩個參數(tuple) filename, filetype,我們要使用的是第一個路徑,
而第二個是檔案的副檔名 (與我們有沒有過濾檔案副檔名有關,因為不是我主要使用的功能,這邊先不細部討論)
- self.ui.show_file_path.setText(filename)
取得開啟後的「檔案路徑」,並顯示在畫面上
open_folder() 的部份 (開啟檔案)
- folder_path = QFileDialog.getExistingDirectory(self, “Open folder”, “./”)
我們可以直接使用 QFileDialog.getExistingDirectory 這個已經設定好的函式完成開啟資料夾的功能,
一樣不同作業系統的問題,在這個功能的底層已經幫我們處理掉了,我們可以直接使用。
“Open folder” 是開始視窗後上方標題列的名稱,
“./” 代表從哪裡開啟這個目錄,「”./”」就是當前目錄
- self.ui.show_folder_path.setText(folder_path)
取得開啟後的「資料夾路徑」,並顯示在畫面上
執行結果
照我們 day5 的程式架構,我們執行
python start.py
[…] Day 10 的讀檔功能 、Day 14 的滑條功能 , 整合進 Day 13 的最終成果 […]