Day26：Tkinter圖形介面開發實作

17th鐵人賽 tkinter gui python chatgpt ai

Yi-Ping, Fang

2025-08-26 09:22:27

170 瀏覽

分享至

前一篇梳理了符合設計人員操作習慣的圖形化介面思路，今天要以Tkinter來實際操作。

26.1. 環境建置

　　Tkinter 是 Python 內建的 GUI 套件，不需額外安裝即可使用。但Google Colab雲端環境不支援本地端視窗互動，所以必須在自己的電腦（Windows/Mac/Linux）本地 Python 環境中執行。
　　以下示範開發環境以Anaconda及VSCode為例，編譯器亦可使用PyCharm、Sublime等。

# 一般來說安裝Python就自帶Tkinter，但有需要也可用下方指令確認：
pip install tk

26.2. 基本元件與版面配置

26.2.1. 最小表單UI範例

　　依照前一篇UI功能設計思路：「檔案/專案管理、參數設定輸入框、功能操作鈕、狀態與提示區」，可以使用像是標籤（Label）、輸入框（Entry）、按鈕（Button）和進度條（Progressbar）等元件來配置。

# 匯入套件
import tkinter as tk
from tkinter import ttk, filedialog, messagebox
import os
import time

# 主視窗
root = tk.Tk()
root.title("批次處理小工具")

# 1. 基本表單UI
tk.Label(root, text="資料夾路徑:").grid(row=0, column=0)
entry = tk.Entry(root, width=40)
entry.grid(row=0, column=1)
btn = tk.Button(root, text="選擇資料夾")
btn.grid(row=0, column=2)

run_btn = tk.Button(root, text="執行")
run_btn.grid(row=1, column=0, columnspan=3, pady=(8, 0))

progress = ttk.Progressbar(root, length=320, mode="determinate")
progress.grid(row=2, column=0, columnspan=3, pady=8)

# 主迴圈 (記得加入才能執行)
root.mainloop()

圖26.1 最小表單UI範例

26.2.2. Tkinter 常用元件

表26.1 Tkinter 常用元件表

Tkinter元件	中文說明	常見用途/說明
Tk root	主視窗物件	所有介面的根視窗（程式主視窗）
Frame	框架容器	分組/區塊排版用，便於UI組織
Button	按鈕	用來觸發事件（例如啟動處理、開啟檔案）
Entry	單行輸入框	用戶文字輸入（如參數、檔名等）
OptionMenu	下拉式選單	讓用戶從多個選項中選擇
Scale	滑桿	數值調整（通常用於參數設定）
Listbox	列表框	顯示多個項目，可選取、批次操作
Treeview	樹狀列表	多層級項目、檔案管理（需import ttk）
Progressbar	進度條	顯示處理進度、批次任務狀態
Canvas	畫布	圖形繪製、結果預覽、互動操作
Label	標籤、靜態說明文字	顯示說明、訊息或狀態
Messagebox	訊息對話框	跳出提示、警告或結果回饋
Menu	選單欄	視窗上方功能選單（如「檔案」、「編輯」）
filedialog	檔案/資料夾對話框（匯入/儲存用）	彈出視窗選檔案、資料夾

26.3. 功能綁定與事件流程

　　除了表單元件的配置外，還必須為每個按鈕或互動元件定義其專屬功能（例如：以 def 函式寫好邏輯），並透過事件綁定方式讓程式在用戶操作時自動執行對應處理。
　　以下範例具有以下功能：

資料夾選擇、路徑顯示
按下「執行」會跑遍資料夾內所有.txt檔，計算字數
進度條即時顯示
結果用 messagebox 跳出
錯誤或失敗會另存failed_log.txt

# 2. 檔案選取功能
def select_folder():  
    path = filedialog.askdirectory()
    if path:
        entry.delete(0, tk.END)
        entry.insert(0, path)

btn.config(command=select_folder)

# 3. 批次處理主流程
def batch_process(folder):
    result, failed = [], []
    files = [f for f in os.listdir(folder) if f.endswith('.txt')]
    total = len(files)
    if total == 0:
        return [], []
    for idx, fn in enumerate(files):
        try:
            with open(os.path.join(folder, fn), encoding="utf-8") as f:
                txt = f.read()
            result.append((fn, len(txt)))
        except Exception as e:
            failed.append((fn, str(e))) 
        # 進度條更新
        progress['value'] = ((idx+1)/total) * 100
        root.update()
        time.sleep(0.05)  # 模擬處理延遲，可移除
    return result, failed

# 4. 按鈕事件綁定
def on_execute():
    folder = entry.get()
    if not folder or not os.path.isdir(folder):
        messagebox.showwarning("錯誤", "請選擇正確的資料夾！")
        return
    progress['value'] = 0
    result, failed = batch_process(folder)
    msg = f"處理完成！共處理 {len(result)} 筆 .txt 檔案。\n"
    if failed:
        msg += f"失敗 {len(failed)} 筆，詳見 failed_log.txt"
        with open("failed_log.txt", "w", encoding="utf-8") as log:
            for fn, err in failed:
                log.write(f"{fn}: {err}\n")
    messagebox.showinfo("結果", msg)

run_btn.config(command=on_execute)

# 主迴圈(記得加入並置於最尾處才能執行)
root.mainloop()

26.4. 結語

　　今天透過Tkinter圖形介面，可以讓資料處理或AI應用更直觀、更易用，雖然它的功能屬於入門級，但已足以涵蓋日常自動化、文件處理、參數設定等常見需求。
　　對於沒有程式背景的設計師來說，最具挑戰性的往往是基本程式的撰寫。不過，在這個 AI 時代，這項工作也能藉由 ChatGPT 等 AI 工具的協助大幅降低門檻。
　　明天將以我的親身經驗，實際分享我在程式設計時，如何善用 ChatGPT 來協助解決問題與優化開發流程，敬請期待！