學習路線
本章 15 篇筆記依「先會開視窗 → 再放元件 → 最後組成程式」的順序安排：
A 起步 ─── 1 tkinter → 3 版面配置 → 11 ttk 主題元件
│
B 基本元件 ─ 2 Label · 4 Button · 5 Entry · 6 messagebox · 9 PhotoImage
│
C 選擇元件 ─ 7 Radiobutton · 8 Checkbutton · 13 Combobox
│
D 容器表格 ─ 12 Frame / LabelFrame · 14 Treeview
│
E 綜合實作 ─ 10 遊戲銷售統計 · 15 學生資料維護系統
建議順序
1 → 3 → 2 → 4 → 5 → 6 這六篇是核心，學完就能做出「輸入資料、按按鈕、跳提示」的完整互動程式。
其餘元件（7、8、9、13）用到再查即可，不必一次讀完。
11 ttk 建議提早看 —— 之後的範例幾乎都用ttk版本的元件。
全部筆記一覽
A｜起步：視窗與版面
| 筆記 | 內容 | 關鍵語法 |
|---|---|---|
| 1. tkinter 套件 | 匯入套件、建立主視窗、元件總覽 | tk.Tk() mainloop() title() geometry() |
| 3. 視窗版面配置 | 元件如何排列與對齊 | pack() grid() fill expand padx pady |
| 11. ttk 主題元件套件 | 外觀較新的元件版本 | ttk.Button ttk.Entry ttk.Label |
B｜基本元件
| 筆記 | 內容 | 關鍵語法 |
|---|---|---|
| 2. Label 標籤元件 | 顯示文字或圖片 | tk.Label |
| 4. Button 按鈕元件 | 按鈕與事件觸發 | tk.Button command= |
| 5. Entry 文字方塊元件 | 單行文字輸入 | tk.Entry textvariable= StringVar |
| 6. messagebox 對話方塊元件 | 提示、警告、確認對話框 | showinfo showwarning showerror askyesno |
| 9. Photoimage 圖片元件 | 在視窗中顯示圖片 | tk.PhotoImage |
C｜選擇類元件
| 筆記 | 內容 | 關鍵語法 |
|---|---|---|
| 7. Radiobutton 選項按鈕元件 | 多選一 | tk.Radiobutton variable= value= |
| 8. Checkbutton 核取按鈕元件 | 可複選 | tk.Checkbutton BooleanVar |
| 13. Combobox 下拉式選單元件 | 下拉選單 | ttk.Combobox values= state='readonly' |
D｜容器與表格
| 筆記 | 內容 | 關鍵語法 |
|---|---|---|
| 12. Frame 與 LabelFrame 容器元件 | 把元件分組、做出水平排列 | ttk.Frame ttk.LabelFrame |
| 14. Treeview 清單（表格）元件 | 以表格顯示多筆多欄資料 | ttk.Treeview heading column insert bind |
E｜綜合實作
| 筆記 | 內容 | 搭配技術 |
|---|---|---|
| 10. 遊戲銷售統計 | 輸入銷售量並即時繪製柱狀圖 | tkinter + matplotlib |
| 15. 學生資料維護系統（綜合實作） | 完整 CRUD 圖形介面 | ttk + MySQL，class 封裝 |
貫穿全章的核心觀念
一、變數類別（Variable Class）
tkinter的元件不直接存值，而是透過變數類別與畫面雙向綁定。這個觀念在第 5、6、7、8、13、15 篇都會用到：
| 變數類別 | 存放型態 | 常搭配 |
|---|---|---|
StringVar() | 字串 | Entry、Combobox、Label |
IntVar() | 整數 | Radiobutton、Checkbutton |
DoubleVar() | 浮點數 | 數值輸入 |
BooleanVar() | 布林值 | Checkbutton |
var = tk.StringVar() # 建立
ttk.Entry(frame, textvariable=var).pack() # 綁定到元件
var.get() # 畫面 → 程式（讀出）
var.set("預設值") # 程式 → 畫面（填入）二、事件驅動
視窗程式不是由上往下執行，而是等待事件發生才呼叫對應函式。三種觸發方式：
| 方式 | 寫法 | 用在 |
|---|---|---|
按鈕 command | ttk.Button(…, command=self.save) | 按下按鈕 |
bind() 綁定 | tree.bind('<<TreeviewSelect>>', on_select) | 選取清單、鍵盤、滑鼠 |
| 直接呼叫 | self.refresh() | 程式自己需要時 |
⚠️ 全章最常犯的錯：
command後面多加括號command=self.save # ✅ 把函式「交給」按鈕，按下才執行 command=self.save() # ❌ 建立按鈕當下就執行一次，按鈕反而失效
三、容器的層次
元件不是直接放進主視窗，而是先放進容器再組合。這是做出「多欄排列」的關鍵：
主視窗 (tk.Tk)
└─ LabelFrame（分組外框）
└─ Frame（每一列）
└─ Label + Entry + Combobox（水平排列）
若所有元件都直接pack到主視窗，它們只會一個一個往下疊。詳見 12. Frame 與 LabelFrame 容器元件。
我想做什麼？（任務導向查找）
| 我想… | 看這篇 |
|---|---|
| 開一個視窗、設定標題與大小 | 1. tkinter 套件 |
| 讓元件並排而不是往下疊 | 3. 視窗版面配置、12. Frame 與 LabelFrame 容器元件 |
| 讓元件之間留空隙 | 3. 視窗版面配置（padx、pady） |
| 讓元件隨視窗放大 | 3. 視窗版面配置（fill、expand） |
| 顯示一段文字 | 2. Label 標籤元件 |
| 讓使用者輸入文字 | 5. Entry 文字方塊元件 |
| 按鈕按下去要做事 | 4. Button 按鈕元件 |
| 跳出提示／錯誤／確認視窗 | 6. messagebox 對話方塊元件 |
| 多選一（性別、方案） | 7. Radiobutton 選項按鈕元件 |
| 可複選（興趣、配備） | 8. Checkbutton 核取按鈕元件 |
| 下拉選單 | 13. Combobox 下拉式選單元件 |
| 顯示圖片 | 9. Photoimage 圖片元件 |
| 用表格顯示多筆資料 | 14. Treeview 清單（表格）元件 |
| 讓外觀比較新 | 11. ttk 主題元件套件 |
| 把整個程式組織成類別 | 15. 學生資料維護系統（綜合實作） |
| 接資料庫做完整系統 | 15. 學生資料維護系統（綜合實作） |
| 畫統計圖表 | 10. 遊戲銷售統計 |
常見錯誤 → 去哪裡找答案
| 症狀 | 原因 | 看這篇 |
|---|---|---|
| 視窗一閃就關閉 | 忘記root.mainloop() | 1. tkinter 套件 |
| 按鈕一建立就自動執行 | command=函式() 多加括號 | 4. Button 按鈕元件 |
| 元件全部擠成一直排 | 沒用Frame分組，或忘了side='left' | 12. Frame 與 LabelFrame 容器元件 |
| 讀不到使用者輸入的值 | 沒綁textvariable，或忘了.get() | 5. Entry 文字方塊元件 |
| 圖片沒顯示（一片空白） | PhotoImage物件被回收 | 9. Photoimage 圖片元件 |
Treeview 資料越按越多 | 沒先delete()清空就重新insert | 14. Treeview 清單（表格）元件 |
清單顯示一堆 None | 沒用or ''把NULL轉空字串 | 15. 學生資料維護系統（綜合實作） |
| 按「修改」沒反應 | 沒先選取，selected_id仍是None | 15. 學生資料維護系統（綜合實作） |
| 資料改了但畫面沒更新 | 忘記操作後呼叫refresh() | 15. 學生資料維護系統（綜合實作） |
全章重點速記
記住這 8 條
- 視窗程式的骨架固定是
tk.Tk()→ 建立元件 →mainloop()command=函式不要加括號，加了就變成立刻執行- 元件要並排必須先包進
Frame，再用side='left'- 讀寫元件的值靠變數類別：
.get()讀出、.set()填入ttk版本外觀較新，新程式優先用ttk（但messagebox仍在tkinter底下）Treeview更新資料要先delete()清空再insert()- 刪除等不可逆操作，一定先用
askyesno()確認- 元件一多就用 class 封裝，元件與狀態都掛在
self底下
延伸應用
| 主題 | 關聯 |
|---|---|
| 1. MYSQL 資料庫連線 | 第 15 篇的資料層，含參數化查詢與 CRUD 完整教案 |
| generate_students | 產生測試資料，可先塞資料再用第 15 篇的程式維護 |
| 0. 章節索引 | 視窗程式的資料庫操作與檔案存取都需要例外處理 |
本章的三支實作程式
程式 位置 說明 Sales.py第 10 篇內 遊戲銷售統計（tkinter + matplotlib） student_crud.pyassets/資料夾學生資料維護系統（ttk + MySQL） generate_students.pyvault 根目錄 產生測試用的學生假資料