【Python Tkinter】EP1 圖形介面應用程式開發-環境建置及新增專案

大家好,我是黃老師 今天輕鬆學系列要為各位來介紹一下 Python的TKinter這個模組 如何快速的透過TKinter 我們來去建立一個圖形使用者介面的應用程式 課程當中,你是一個小白,都不懂Python沒關係 就跟著我一步一步從無到有 我們會教各位從安裝SDK開始 再安裝開發環境 然後就開始去撰寫Python的程式 去部署 那最後就有一個圖形使用者應用程式出來了 OK,那廢話不多說 我們來看一下課程的大綱 第一個,工藝善其事,必先利其器 所以我們待會會先去把SDK還有IDE 我們去把它下載安裝 下載安裝好了馬上就建立第一個專案 專案建立好了,開始我們透過TKinter這個模組 就來撰寫我們的應用程式 那應用程式撰寫好了 都是要透過Python的interpreter 或是執意器纔有辦法執行 沒有辦法像你們在執行Word啦 執行Excel啦 直接點左鍵兩下就執行 所以最後我們要去把它建置成.exe的應用程式 好,各位瞭解了整個上課的內容之後 我們心動不如馬上行動 馬上來去下載一下這個開發的SDK 就是我們的Python還有開發的工具IDD OK,那首先我們先去開啟瀏覽器 那開啟瀏覽器當然我們要第一個下載Python的SDK 所以我們直接輸入去搜尋一下Python Download 好,找到第一個按下去 它就進到它的官網來 那進到它的官網我們直接點這一顆就可以了 不用去管下面這個不同的系統 因為你點這一顆它自己會自動去偵測你的系統 你的系統如果是Windows 它就讓你去下載exe 如果是這個Mac 它就讓你去下載DMG 所以我係統是Windows 我按下去 OK,這時候它就去下載這個exe的 存檔 那檔案小小的而已 安裝檔26.9Mb 所以我們直接下載下來之後就點左鍵兩下 來去安裝它 好,那安裝它 下面這兩個都把它核取 第一個就是我們當然使用管理者的權限來去安裝 然後安裝好了把python.exe 添加到系統環境的路徑底下 不然到時候你沒有添加到那個 PACE裡面沒有添加到路徑 有可能你要去執行就沒有辦法執行了 那我們去選擇自訂安裝 好,當我們選擇自訂安裝 所有的核取框都打勾了 小孩子才會去選擇 那至於這有一些功能 後續再介紹 就把它所有都打勾 好了我們按下一步 那下一步這邊 這個讓它打勾了 install python 3.13 for all users 就是我們讓所有的使用者用 而不是說不同的使用者都不能用 那自己安裝的路徑就以預設的路徑就好 不然有時候一些不同的軟體 要去找你的那個SDK 找python的指引器 有可能就找不到了 所以這個用預設的環境就好 那至於下面這三個 我們說小孩子纔要選擇 下面這三個沒有用到 目前沒有用到 我們就不去安裝它了 好了之後按install 安裝也很快 那待會安裝好了我們來檢查一下 是不是安裝成功 好 安裝好了之後 它就直接跟你講說 setup was successful 那這時候我們只要按close就可以了 好那按完close之後 我們要去在 命令提示支援 來去檢查一下 有沒有安裝成功 那也來去執行一下 呼叫它的指引器 來去執行一下我們的python程式 所以呢 開啟任何一個資料夾 好 各位只要去開啟任何一個資料夾 假如說我現在 就開啟我的電腦 好那開啟我的電腦之後 在網址列這邊我輸入 cmd ok當我輸入cmd 它就直接進到命令提示支援 進到命令提示支援 第一個我們先檢查一下 你的python的版本 是不是剛才的3.13 有時候有可能 你的電腦之前已經有 安裝其他版本了 我們檢查一下是不是最新的 所以python 直接輸入python然後- 那個v記得是大寫的v 你如果寫小寫的v 它就 不會顯示版本 反而是你正在 要執行python 所以這邊來 我就python -號那個參數是大寫的v 好了按enter 有沒有是我們剛才下載的 3.13 那你如果要小寫的也可以啦 小寫的你就要寫 virgin v-e-r-s-i-o-n ok 那它現在v-e-r-s-i-o-n 少一個 就少一個- 你假如說要 用小寫的v 那個是我們直接打python -v-e-r-virgin ok 這樣都可以看得到 所以原則上版本下載 沒問題 那再來我們就直接 去啟動python 然後來撰寫一個 非常非常簡單的一個 輸出的程式 看它會不會執行 所以我們現在要進到 python的終端機 我們直接打個python 好了按enter 這邊你就可以看到它已經進到 python的 終端機環境了 再來我們去print 直接輸出一下 哈囉python 好了按enter ok下面它是不是就 印出哈囉python 好所以代表你的sdk 已經安裝好了 來最後我們要結束 這個終端機exit delete 小括號enter 它就離開了 所以這是第一個步驟 我們已經把sdk 安裝好了 那問題sdk安裝好 阿什麼叫sdk 我這邊也寫一下 sdk 它事實上英文就叫 soft developer kit 就是我們的軟體開發工具集 裡面有一些 那個現有的一些模組 或者一些直譯器 讓你來去可以 開發python的程式 那問題我們剛纔在 這個終端機畫面來開發的話 那個 真的不好開發啦 一般我們開發都會透過 圖形使用者介面 就跟你今天要寫論文 你用記事本來寫論文 那幾乎很頭痛 阿你透過我的這一套IDE 這一套整合開發工具 剛才老師講的 IDE IDE 這也是一個專有名詞 不同程式語言 有不同程式語言的IDE 那這個IDE全名就叫 integrated developer environment 就是整合開發 環境的工具 讓你透過這個IDE 我們可以快速的去開發 你的 應用程式 不用說什麼事情都要 這個親力親為 好所以我們緊接著去下載 我們要下載的是這一套 這個是目前 事實上要開發Python的IDE 很多啦 像VSCode Subline 或者那個Spyder Triptel 這一些很多很多 那比較 這個 Pro的而且也比較流行的 這一套叫Python 那Python它有 付費的版本 有Professional的版本 還有Communication 這個等於是 不用錢的版本 那我們殺雞優牛當 我們直接透過不用錢的 Communication就可以來去開發 我們的應用程式 所以再來我們要去下載Python 這樣的一個IDE 那一樣就開啟 瀏覽器 那在網址列的地方 直接就搜尋一下Python Download 好找到第一個 當你進來之後你要去看一下 因為 上面這個是Python Professional 你要下載也可以 只是它是讓你試用30天 而已 試用好了還是要付錢 所以我們要下載你要捲下來 去選擇這個Python Community Edition 這個就是不用錢的 那我們直接就 點一下Download 好 那Download好了它也是一樣 你看是不同的系統 它自己會帶出 不同的安裝檔案 那我們現在直接存檔 好那存檔好了 我們現在要去安裝 那安裝也是一樣非常的簡單 直接在下載下來的 安裝檔左鍵點兩下 好第一個 歡迎 Python Community Edition Setup 那下一步 安裝的資料夾 也是讓它就在預設的資料夾 就好 那下一步之後 這個地方 桌面上要不要建立那個 捷徑 打勾 那再來我們把那個 .py 這就是我們Python的原生格式 那我們這個 讓它去做關聯 跟我們這個PyCharm 做關聯 那就勾這兩個就可以了 其他這個 這意思就是說 到時候你去開啟資料夾 它就把它當成是專案 可是有時候我們又沒有去設定 那個 Virtual Environment 就是沒有去設犀牛環境 你這樣到時候開起來 還是會有問題 所以你就勾這個PyCharm Community Edition 就是我們去建立 Create Desk Shortcut 建立桌面的捷徑 還有去把這個.py 跟我們PyCharm 做關聯 那下一步 這個地方就用預設的選單 安裝 好很快的我們已經 安裝好了 這個打勾好了 我們既然已經都安裝好 我們就直接去執行 好了按Finish 它就直接會幫你開啟PyCharm 那這邊 它問你說你這個 PyCharm要不要 允許它可以存取我們的 這個網路 有時候它會去做一些 更新啊幹嘛 然後它這邊要求我們 去輸入因為我的電腦 有其他的ID 系列還有這個 VSCode 這我都不要把它 跟它們牽扯在一起 我要全新的 你們假如說你的電腦沒有 安裝這一些當然它也 不會有所以我這邊 Skip Input 好那PyCharm 已經裝好了 裝好第一個 我們是要建立一個新的專案 所以直接點一下New Project 好那New Project Project Name 假如說我就 取一個名稱 我們要來開發一個這個 圖形使用者的 應用程式啦 所以我的那個Project Name 我就叫GUI Application OK 那要存在哪裡 這個你可以自己決定 你自己可以決定 我就直接把它放到稀草 好了 要講解也比較好講解 我就直接放到稀草 那在稀草我額外新增一個 資料夾 資料夾名稱我如果一樣我叫 GUI GUI App OK 這到時候我的專案資料夾 就在稀草的 GUI App 這個都可以自己決定 那這是我的專案名稱 叫GUI Application 好了按OK 好那是剛才兩個步驟啦 第一個步驟設定你的專案名稱 第二個步驟設定你 到時候你的專案 要存在哪個資料夾 OK 來那至於這個 Python 直譯器的類型 我們直接Custom 請它自己幫我 自訂一個虛擬環境 Virtual 這個 Environment 到時候它會有額外的虛擬環境的資料夾 OK 那一樣你這個地方你要去選擇 Create New 當你把你的專案 名稱設定好了 你的專案要存在哪裡 然後呢 直譯器的類型你就跟它講說 我是要自訂 自訂這邊我們當然選擇新的 類型就選擇 虛擬環境 基礎的這個 Python 的直譯器 這是我們剛才安裝的嘛 我說那個路徑不要隨便亂改 因為一般ID 它自己會去抓啦 虛擬環境的位置就 存在我的GUI App 這是我的工作資料夾 它會在 GUI App 裡面 在幫你建立一個你的那個 專案名稱 底下有一個Virtual Environment 虛擬環境的 好那再來這個幫老師 打勾一下 Make Available For All Project 那以後 適用於 所有的專案就對了 好了我們直接打勾 然後Create 好從剛才 我們花了十幾分鐘 去下載 Python的SDK 去下載 要開發Python軟體的 IDE PyCharm 那最後去新增一個 Project 到這裡 環境已經建置好了 環境建置好了 我們現在是不是手癢 打鐵趁熱一下 馬上來去看 環境建置好了之後 馬上來去寫一個 Hello Python 一般我們在學任何程式軟體 第一個程式要嘛就是 Hello Word 啊你學Java就Hello Java 那學這個 C++就Hello CPP 那我們這個叫Hello Python 你就直接不要在 這個Virtual Environment 我們就直接在你的 專案在你的專案資料夾 的根上面按右鍵 選擇New 然後去選擇Python file 好那這個Python file 我就直接叫game好了 好這裡有一個game.py 那我們現在 馬上來輸出一下 來去執行一下Hello Python 那在Python 不像那個Java啦 不像C啦 都還要有程式進入點 也就是所謂的Main 那Python不用 你可以直接就執行 因為一個是編譯的 像Java C++它都是屬於 Compiler 都是屬於這個編譯的程式語言 它們都是屬於 Compiler 中文叫編譯的程式語言 剛剛我們講說 C啦 C++啦 Java啦 它們都是屬於這個 Compiler 就是要透過編譯 那至於我們的Python PHP啦 這個我們是透過 Interpreter 我們稱為 執意 所以它可以直接就 透過那個.py的 來去直接執行 它不用再 透過編譯 所以我們現在直接去 寫個Print 然後這是字串 你可以用單引號或者用雙引號 那我們就寫個Hello Python OK了之後右上角這個 執行一下 好這裡你就可以看到 Hello Python 所以呢我們的環境 很快就這樣建置好了 然後也開發了你的 第一個Python 只是呢在Python這一套軟體 有一些快速鍵我們設定 一下 在課程裡面 我這邊就只用到兩個快速鍵 第一個快速鍵就是 有時候這個字太小了 我要放大縮小 那放大縮小我要利用這個 Ctrl加滾輪 是透過這個 Ctrl加滾輪 來去 做這個 字的放大縮小 這是第一個 第二個我們在開發 圖形使用者介面應用程式 有時候要去設定色彩 設定色彩我們還要自己去 記那個什麼色彩 的名稱啦 或者要設定那個 色彩的16進制代碼 那太累了 所以我們待會也設定一個快速鍵 把它Python預設的 檢測器把它叫出來 所以第一個我們先去 設定一下兩個快速鍵 第一個快速鍵 就是要做縮放 我們點一下右上角 這個齒輪的符號 點一下齒輪的符號 直接按一下Setting 按完Setting它就出現 這樣的一個對話視窗 設定的對話視窗 那我們先點一下Keymap 當點Keymap 之後我們去搜尋 因為我現在字型 我要放大縮小對不對 所以我直接去 搜尋一下Increment 這裡很明顯就可以看到 有這個Increment 剛才 它又跳掉了 來我們在 這裡你可以看到 有那個 Increment 這個叫Increase 方Size 增加字型大小 我再去找一下 下面這裡你可以看到 有Increase 跟Decrease 可是那個搜尋的 它都有預設的 那我們不要用它 我們搜尋改一下 我直接改一下方Size 當我選擇方Size 有沒有看到這裡有一個叫Decrease 方Size 一個叫Increase 方Size 那我們就是直接來設定 當你今天 你要把字型放大 我們點左鍵兩下 那點左鍵兩下Edit Showcard 它問你說你是要設定什麼 我們去選擇 Mouse 選擇Mouse Showcard 那這時候Ctrl鍵按著 滾輪向上滾 它就直接接收到這個快速鍵 叫Ctrl 叫Fill Up 就是你Ctrl鍵按著滾輪向上滾 就可以去加大 就可以去拉近 等於是Zoom In的意思 那Decrease方Size 點左鍵兩下 一樣Edit Mouse Showcard 這時候Ctrl鍵按著 滾輪向下滾 就是把它縮小 都OK了之後 我先再按一個OK 來試一下 這時候我Ctrl鍵按著 滾輪向上滾 有沒有發現它字就變大 滾輪向下滾 它字就變小 這是設定第一個快速鍵 緊接設定第二個快速鍵 是要設定 我要把檢測器叫出來 再來我們要把檢測器 透過快速鍵把它叫出來 為什麼要設定檢測器 因為我們在設定圖形使用者介面 總是要設的比較 有顏色 有顏色到時候你要設定顏色 你要自己想了老半天 所以我們直接透過 Color Pick檢測器 來去直接 設定你想要的色彩 所以我們再去點一下 齒輪設定的按鈕 一樣是在Keymap 不要點錯位置 左邊的選單 跟剛才一樣 還是在Keymap 然後我們直接去 搜尋一下Color Pick 好那我搜尋 Color Pick 找到這個Show Color Pick 你就直接把它點左鍵兩下 這個我們設定一下 Keyboard 直接設定鍵盤 那我按個 ALT加C 它就接收到了 你要去顯示這個檢測器 你待會按 ALT加C它就會出現 好那按OK 好來我現在一樣 按個ALT加C 各位有沒有發現 這就出現這樣的一個Color Pick 這就是我剛才講的色碼 你要去記這些色碼 要記到民國幾年 所以後續我們針對 按鈕啦針對圖形使用者 介面的視窗 要設定背景設定文字色彩 都可以直接就把 這個Color Pick叫出來 然後直接去複製 它的這個色碼就可以了 OK 好那我們 這個第一堂課 很快的已經把這個環境 建置好了 那我們也建立好第一個專案了 那待會第二堂課 我們就要繼續來 看一下如何 透過TKinter這個模組 這個模組不會很困難 很簡單 你只要瞭解一個頭 尾巴應該就都清楚了 我們就可以很快的來去開發 一個圖形使用者介面 OK 好那各位 手指動一動 別忘了按個讚 或訂閱 好那今天的課程就到這裡 我們下一堂課見了 掰掰 明鏡需要您的支持歡迎收看訂閱明鏡