9. Photoimage 圖片元件

若能在輸出入介面加上適當的圖形，會使得操作視窗的介面更加生動。Python透過PhotoImage圖片元件，可以在視窗上加入圖片。
圖片元件適合使用的圖檔格式有：gif、pgm以及ppm類型。其語法如下：

物件變數 = tkinter.PhotoImage(file='圖檔路徑或檔名')

tkinter套件的PhotoImage元件只能顯示gif、pgm以及ppm類型的圖片。若要顯示jpg圖片，就必須在程式最開頭匯入PIL套件的ImageTK和Image模組，就可以使用ImageTk.PhotoImage()來建立顯示JPG的圖片元件，其寫法如下：

from PIL import ImageTk, Image # 匯入PIL套件中的ImageTK 和Image 模組
......
......
物件變數=ImageTk.PhotoImage(Image.open('圖檔路徑或檔名'))

[簡例] (檔名:photoimage01.py)

建立如下書籍選購程式,核取按鈕項目使用 'AEL022700.jpg'、'AEL022900.jpg'、'AEL019900.jpg'圖示呈現,當使用者選取要選購的書籍後並按下[確定]鈕,接著會出現對話方塊並顯示選購的書籍以及總金額。

[結果]

程式碼: photoimage01.py

import tkinter as tk
from tkinter import messagebox as msgbox
from PIL import ImageTk, Image
 
def fnOk():
    data = ''
    total = 0
    for i in isCheckAry:
        if isCheckAry[i].get() == True:
            data += booksNameAry[i] + ", "
            total += booksPriceAry[i]
    result = '你選購的書為{0}，總共{1}元'.format(data , total)
    msgbox.showinfo('好書選購', result)
 
win = tk.Tk()
win.title('優質好書選購')
win.geometry('250x500')
 
booksIdAry=['AEL022700','AEL022900','AEL019900']
booksNameAry=['C#', 'MVC', 'C語言']
booksPriceAry=[680, 550, 420]
isCheckAry={}
bookImg={}
 
for i in range(len(booksIdAry)):
    isCheckAry[i] = tk.BooleanVar()
    bookImg[i] = ImageTk.PhotoImage(Image.open(booksIdAry[i]+".jpg"))
    tk.Checkbutton(win, image=bookImg[i], variable=isCheckAry[i]).pack()
 
btnOk = tk.Button(win, text='確定', command=fnOk)
btnOk.pack()
win.mainloop()

說明

1. 第3行:匯入PIL套件中的ImageTK和Image模組,即可以使用ImageTk.PhotoImage()來建立顯示JPG的圖片元件。
2. 第5~13行:定義fnOk函式,此函式使用迴圈逐一判斷 isCheckAry字典中的每一個元素的值是否為True,若為True即表示該項書籍被勾選,即將書籍名稱合併到data變數,將書籍價錢累加到total變數,最後使用對話方塊顯示書籍選購結果。
3. 第19行: 建立booksIdAry串列,串列中的元素用來表示書籍書號，書號加上.jpg即代表該書的圖檔。
4. 第20行:建立booksNameAry串列,串列中的元素用來表示書籍名稱。
5. 第21行:建立 booksPriceAry串列,串列中的元素用來表示核取按鈕書籍對應的價格。
6. 第22行:建立isCheckAry空字典,用來存放書籍的核取按鈕的狀態。
7. 第23行:建立bookImg空字典,用來存放書籍項目的顯示的圖片元件。
8. 第25〜28行:使用迴圈建立各書籍的核取按鈕。
9. 第26行:指定書籍核取按鈕的值為布林型別。
   10.第27行:指定書籍核取按鈕要顯示的圖片元件。
   11.第30行:按下[確定]鈕即執行5~13行的fnOk()函式。

---

相關主題與延伸閱讀

• 0. 章節索引：本章全部筆記的學習地圖與快速查找。
• 1. tkinter 套件：tkinter套件的整體介紹與元件總覽。
• 8. Checkbutton 核取按鈕元件：本篇範例延續自〈8. Checkbutton 核取按鈕元件〉的點餐邏輯，改以圖片呈現選項。
• 2. Label 標籤元件：Label的image參數同樣可用來顯示圖片元件。
• 7. Radiobutton 選項按鈕元件：Radiobutton的image參數也能以圖片代表選項內容。
• 6. messagebox 對話方塊元件：選購完成後以對話方塊顯示所選書籍與總金額。