分類

展開全部 | 收合全部

分類

展開全部 | 收合全部

【PyQt5】Day 10 – 以 QFileDialog 讀取系統的檔案、資料夾

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

前言

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

開啟檔案的視窗

將結果呈現在畫面上

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 作為文字的輸入
6.【PyQt5】Day 14 - 使用 QSlider 製作可拖曳的滑條
8.【PyQt5】Day 19 - 使用 QProgressBar,製作進度條的功能
⭐介面系統控制篇⭐:
5.【PyQt5】Day 10 – 以 QFileDialog 讀取系統的檔案、資料夾
7.【PyQt5】Day 18 / Project 使用 QTimer,自製碼表(計時器) PyQt5 stopwatch DIY
1.【PyQt5】Day 20 - PyQt 最重要的 QThread 概念 / 為什麼 windows, mac, ubuntu (linux) 程式會「沒有回應」?
2.【PyQt5】Day 21 – 透過 PyQt 實現滑鼠監聽總整理,完全掌握滑鼠控制 (listen mouse)
3.【PyQt5】Day 22 – PyQt 視窗的個性化/屬性控制 setWindowFlags,禁止放大縮小、永遠顯示於最上層/最下層
4.【PyQt5】Day 23 – 使用系統內建的調色盤 QColorDialog,來替我們選擇顏色 QColor (Color Picker)
5.【PyQt5】Day 24 / Project 偵測滑鼠目前指示顏色的小工具 (滴管工具), 利用 QCursor 偵測滑鼠, QApplication 取得截圖
⭐影像處理篇⭐:
1.【PyQt5】Day 11 – 以 Qlabel 在 PyQt 中顯示圖片 (基於 QImage 使用 OpenCV)
2.【PyQt5】Day 12 – 建立一個可以縮放圖片大小的顯示器 (基於 QImage 使用 OpenCV)
3.【PyQt5】Day 13 – 使用 QVBoxLayout, QscrollArea 製作出捲軸,以高解析度檢視圖片 (基於 QImage 使用 OpenCV)
4.【PyQt5】Day 15 / Project 與檔案功能整合,製作出可讀取圖片並可縮放的 UI 介面 (使用 PyQt + OpenCV)
5.【PyQt5】Day 16 - 在 PyQt5 中取得圖片座標 (滑鼠位置) mousePressEvent,觀察圖片在 Qt 中產生的方式,對原圖進行座標換算處理
6.【PyQt5】Day 17 / Project 製作標註 roi 工具, 開始導入 OpenCV 作為繪圖引擎, 在圖上畫點並顯示座標
⭐project 篇⭐:
1.【PyQt5】Day 25 / Project 自己做一個影片播放器 DIY video player (結合 PyQt + OpenCV)
2.【PyQt5】Day 26 / Project 替我們影片播放器增加一個顯示進度的滑條 video player add slider (與昨日 bottleneck 處理細節)
3.【PyQt5】Day 27 / Project 製作影片 ROI 標註工具 (PyQt 結合 OpenCV 在圖上畫點畫線)
4.【PyQt5】Day 28 / final project – 1 來搞一個自己的 photoshop 吧!UI 篇 + 純程式架構篇 (結合 PyQt + OpenCV)
5.【PyQt5】Day 29 / final project – 2 來搞一個自己的 photoshop 吧!後段程式細節篇 (結合 PyQt + OpenCV)
6.【PyQt5】Day 30 / final project – 3 來搞一個自己的 photoshop 吧!把每個方法封裝起來製作出還原功能吧! (結合 PyQt + OpenCV)
⭐打包程式篇⭐:
1.【PyQt5】Day 3 – 用 pyinstaller 將 python 程式打包,把每天的成果分享給你的親朋好友
⭐【喜歡我的文章嗎? 歡迎幫我按讚~ 讓基金會請創作者喝一杯咖啡!
如果喜歡我的文章,請幫我在下方【按五下Like】 (Google, Facebook 免註冊),會由 「LikeCoin」 贊助作者鼓勵繼續創作,讀者們「只需幫忙按讚,完全不用出錢」哦!

likecoin-steps
Howard Weng
Howard Weng

我是 Howard Weng,很多人叫我嗡嗡。這個網站放了我的各種筆記。希望這些筆記也能順便幫助到有需要的人們!如果文章有幫助到你的話,歡迎幫我點讚哦!
另外,因為定位是「個人的隨手筆記」,有些文章內容「⚠️可能我理解有誤⚠️」或「?只寫到一半?」,如果有發現這樣的情況,歡迎在該文章的最下面留言提醒我!我會儘快修正或補上!感謝大家的建議與幫忙,讓網站能變得更好?

文章: 890

1 則留言

★留個言吧!內容有誤或想要補充也歡迎與我討論!