{Tkinter}

2024 IZCC四校聯合暑訓

楓資－林芊妘

講師介紹

名字：林芊妘

職位：楓資教學長

＃愛ＪＫ

＃追日本男女團

＃最弱教學

＃我會下放

//下放

//不下放

Tkinter

Thinker

Tkinter

Tkinter 是python中標準的GUI（圖形用戶界面）工具包，可用於製作小遊戲或創建簡易的應用工具。透過Tkinter，你可以輕鬆的做出視覺化界面，無需了解複雜的圖形程式設計技巧在這課程你可以學到

－ 建立視窗界面
－ 運用元件製作出按鈕、輸入框等功能
－佈局管理
－ 事件驅動等相關內容

GUI/CUI

GUI

CUI

GUI（Graphical User Interface，圖形使用者介面）是一種讓使用者通過圖形元素（如圖標、按鈕、菜單和窗口）與電腦互動的界面。

CLI命令列界面是使用者透過鍵盤輸入指令，電腦接收後予以執行，又稱文字使用者介面CUI

VSCode

環境架設

VSCode

環境架設

1

2

3

4

5

6

___.py

1.桌面->新增資料夾

2.打開VSCode

3.Install Python

4.File->Open Folder

5.New File

6.__.py

檔案名稱

import

引入模組

import random
import random as rd

import  [module]

import  [module] as [縮寫]

引入模組內的功能

from random import randint

from [module] import [function/variable...]

import  [module]

from [module] import [function]

import  [module] as [縮寫]

import random
print(random.randint(1,100))
import random as rd
print(rd.randint(1,100))
from random import randint
print(randint(1,100))

pip

pip install [module]

非內建的模組需 pip install [module]

1.搜尋cmd (命令提示字元)

2.直接打pip install pillow

=>pillow就下載好了

pillow (PIL) 可用於圖像處理

*打pip list 會出現曾經pip install過什麼

from PIL import Image
image = Image.open("pig.jpg")
new=image.resize((300,300),Image.LANCZOS)
new.save("new.jpg")

#pig.jpg

#new.jpg

(1500x1035)

(300x300)

建立視窗

import tkinter as tk #引入tkinter模組命為tk
root=tk.Tk() #創立視窗
root.title("Hello") #視窗名稱Hello
root.geometry("200x150") #視窗大小,寬200,高150
root.mainloop() #顯示視窗

更改icon

root.tk.call("wm", "iconphoto", root._w, tk.PhotoImage(file="[檔案路徑]"))

色碼表

icon

png/jpg檔

root.iconbitmap("[檔案路徑]")

ico檔

更改背景顏色

root.configure(background="[名稱]")

root.configure(background="[色碼]")

視窗鎖定(不更改視窗大小)

root.resizable(False,False)

import tkinter as tk #引入tkinter模組命為tk
root=tk.Tk() #創立視窗
root.title("Hello") #視窗名稱
root.geometry("200x150") #視窗大小
root.resizable(False,False) #鎖定視窗大小
root.tk.call("wm", "iconphoto", root._w, tk.PhotoImage
             (file="icons8-cat-64.png")) #更改畫面左上角圖示
root.configure(background="lavender") #改變視窗背景顏色
root.mainloop() #顯示視窗

元件

Tkinter中的元件

Python tkinter GUI 基本用法

美化元件

  • background(bg):background="[顏色]"
  • foreground(fg):foreground="[顏色]"
  • font:font=("[字體]",[字體大小])  (單位:pt)
  • width:width=[寬度]  (單位:文字單位)
  • height:height=[高度]  (單位:文字單位)
  • text:text="[文字]"
label=tkinter.Label(text="這是標籤",bg="light blue",foreground="blue")
button=tkinter.Button(width=10,height=1,text="這是按鈕",font=("標楷體",15))

元件

(Label/Button)

Label(標籤)

變數=tkinter.Label(text="[標籤文字]")

import tkinter
root=tkinter.Tk()
root.geometry("300x200")
root.title("Label")
label=tkinter.Label(text="這是標籤")
label.pack(pady=50)
root.mainloop()

=>將標籤放置的位置

*pack是依照順序擺放

*pady是距離上方多少(單位:px)

Button(按鈕)

變數=tkinter.Button(text="[標籤文字]",width=[數字])

import tkinter
root=tkinter.Tk()
root.geometry("300x200")
root.title("Button")
button=tkinter.Button(text="這是按鈕",width=10)
button.pack(pady=50)
root.mainloop()

各種按鈕

  • 去掉邊寬:borderwidth=0
  • 圓角按鈕:

style=tkinter.ttk.Style()

變數=tkinter.ttk.Button(text="[文字]",
                            style='RoundedButton.TButton')

import tkinter
import tkinter.ttk
root=tkinter.Tk()
root.geometry("300x200")
root.title("Button")
button_1=tkinter.Button(text="原始按鈕",
                        width=10,background="white")
button_1.pack(pady=20)
button_2=tkinter.Button(text="去邊寬按鈕",
                        width=10,borderwidth=0,
                        background="white")
button_2.pack(pady=20)
style=tkinter.ttk.Style()
style.configure('RoundedButton.TButton')
button_3=tkinter.ttk.Button(text="圓角按鈕",
                            style='RoundedButton.TButton')
button_3.pack(pady=20)
root.mainloop()

元件

(Frame/Canvas)

Frame(框架)

變數=tkinter.Frame()

import tkinter
root=tkinter.Tk()
root.configure(background='#FFE4E1')
root.title("Frame")
root.geometry("300x300")
frame=tkinter.Frame(bg="light green",
                    padx=10,pady=50)
label=tkinter.Label(frame,text="Hi",
                    width=10)
label.pack()
frame.pack()
root.mainloop()

Canvas(畫布)

變數=tkinter.Canvas(bg="[顏色]")

import tkinter 
root=tkinter.Tk() 
root.title("Canvas") 
root.geometry("300x200")
canvas=tkinter.Canvas(bg="maroon") 
canvas.pack()
root.mainloop()

圖形(線條)

  • line:[變數].create_line([起點x,y,終點x,y])
dash(虛線) dash=([實線長度],[間格寬度])
width(粗細) width=[寬度]
fill(顏色) fill="[顏色]" 
import tkinter 
root=tkinter.Tk() 
root.title("Canvas") 
root.geometry("300x200")
canvas=tkinter.Canvas(bg="white") 
canvas.create_line(50,50,200,50)
canvas.create_line(50,70,200,70,dash=(4))
canvas.create_line(50,90,200,90,width=5,fill="pink")
canvas.pack()
root.mainloop()

圖形(矩形)

  • rectangle:[變數].create_rectangle([矩形左上x,y,矩形右下x,y])
dash(虛線) dash=([實線長度],[間格寬度])
width(外框粗細) width=[寬度]
fill(填滿顏色) fill="[顏色]"
outline(外框顏色) outline="[顏色]" 
import tkinter 
root=tkinter.Tk() 
root.title("Canvas") 
root.geometry("300x200")
canvas=tkinter.Canvas(bg="white") 
canvas.create_rectangle(50,50,250,70)
canvas.create_rectangle(50,90,250,110,dash=(4),
                        outline="purple",width=5)
canvas.create_rectangle(50,130,250,150,width=5,fill="pink")
canvas.pack()
root.mainloop()

圖形(圓形與橢圓形)

  • oval:[變數].create_oval([左上角x,y,右下角x,y])
dash(虛線) dash=([實線長度],[間格寬度])
width(外框粗細) width=[寬度]
fill(填滿顏色) fill="[顏色]"
outline(外框顏色) outline="[顏色]" 
import tkinter 
root=tkinter.Tk() 
root.title("Canvas") 
root.geometry("300x200")
canvas=tkinter.Canvas(bg="white") 
canvas.create_oval(30,20,80,70)
canvas.create_oval(80,120,220,150,dash=(4),
                   outline="yellow",width=5)
canvas.create_oval(270,20,220,70,width=5,fill="pink")
canvas.pack()
root.mainloop()

圖形(多邊形)

  • polygon:[變數].create_polygon([多點座標x,y,...])
dash(虛線) dash=([實線長度],[間格寬度])
width(外框粗細) width=[寬度]
fill(填滿顏色) fill="[顏色]"
outline(外框顏色) outline="[顏色]" 
import tkinter 
root=tkinter.Tk() 
root.title("Canvas") 
root.geometry("300x200")
canvas=tkinter.Canvas(bg="white") 
canvas.create_polygon(30,20,80,70,10,50,90,100)
canvas.create_polygon(80,120,180,180,50,150,dash=(5,2),
                   outline="yellow",width=5,fill="white")
canvas.create_polygon(180,50, 220,50, 
                      260,130, 190,130,width=5,fill="pink")
canvas.pack()
root.mainloop()

元件

(Radiobutton/Checkbutton)

Radiobutton(單選按鈕)

變數=tkinter.Radiobutton(text="[文字]")

import tkinter
root=tkinter.Tk()
root.configure(background='#FFE4E1')
root.title("Radiobutton")
root.geometry("300x300")
radi_1=tkinter.Radiobutton(
    text="單選一",
    background="light blue")
radi_1.pack()
radi_2=tkinter.Radiobutton(
    text="單選二",
    background="light blue")
radi_2.pack()
root.mainloop()

綁定多個Radiobutton

import tkinter
root=tkinter.Tk()
root.configure(background='#FFE4E1')
root.title("Radiobutton")
root.geometry("300x300")
val=tkinter.StringVar()
#建立文字變數/IntVar(數字變數)
radi_1=tkinter.Radiobutton(
    text="單選一",
    background="light blue"
    ,variable=val,
    value='a')#價值變為文字a
radi_1.pack()
radi_1.select()
radi_2=tkinter.Radiobutton(
    text="單選二",
    background="light blue"
    ,variable=val,value='b')
radi_2.pack()
root.mainloop()

Checkbutton(多選按鈕)

變數=tkinter.Checkbutton(text="[文字]")

import tkinter
root=tkinter.Tk()
root.configure(background='#FFE4E1')
root.title("play game")
root.geometry("300x300")
check_1=tkinter.Checkbutton(text="0")
check_1.pack()
check_2=tkinter.Checkbutton(text="1")
check_2.pack()
root.mainloop()

元件

(Listbox/OptionMenu)

Listbox(列表選擇)

import tkinter
root=tkinter.Tk()
root.configure(background='#FFE4E1')
root.title("Listbox")
root.geometry("300x300")
listbox=tkinter.Listbox()
listbox.insert(1,"富爸爸")
listbox.insert('end',"一般的爸爸")
listbox.insert(3,"窮爸爸")
listbox.pack()
root.mainloop()

添加多個選項

  • 用串列的方式新增多筆資料
import tkinter
root=tkinter.Tk()
root.configure(background='#FFE4E1')
root.title("Listbox")
root.geometry("300x300")
listbox=tkinter.Listbox()
listbox=tkinter.Listbox()
IZCC=["infor","zsisc","ckcsc","cmioc"]
for i in IZCC:
    listbox.insert(tkinter.END,i)
listbox.pack()
root.mainloop()

OptionMenu(下拉選單)

import tkinter
root=tkinter.Tk()
root.configure(background='#FFE4E1')
root.title("OptionMenu")
root.geometry("300x300")
optionlist=['社長','副社','教學',
            '公關','網管','總務','文書']
value=tkinter.StringVar()
value.set('職位')
menu=tkinter.OptionMenu(root,value,
                        *optionlist)
menu.pack()
root.mainloop()

元件

(Entry/Messagebox)

Entry(輸入框)

變數=tkinter.Entry()

import tkinter
root=tkinter.Tk()
root.configure(background='#FFE4E1')
root.title("Entry")
root.geometry("300x300")
entry=tkinter.Entry()
entry.pack()
root.mainloop()

Messagebox(訊息提示框)

import tkinter
from tkinter import messagebox
messagebox.showinfo('喜歡你', '噎')

messagebox.showinfo('[檔案名稱]','[訊息]')

showinfo 普通訊息，一個關閉按鈕
showwarning 警告訊息，一個關閉按鈕
showerror 錯誤訊息，一個關閉按鈕
askquestion 提問，兩個按鈕 ( yes/no )
askyesno 是或否，兩個按鈕 ( yes/no )
askokcancel 取消，兩個按鈕 ( ok/cancel )
askretrycancel 重試，兩個按鈕 ( retry/cancel)

照片處理

1.PhotoImage

2.Pillow

3.Canvas+Pillow

PhotoImage

*檔案種類有限(png/gif)

*容易失效

import tkinter
root=tkinter.Tk()
root.configure(background='#FFE4E1')
root.title("photo")
root.geometry("300x300")
photo=tkinter.PhotoImage(file="icons8-cat-64.png")
label=tkinter.Label(image=photo)
label.pack()
root.mainloop()

變數=tkinter.PhotoImage(file="[Relative Path]")

Pillow

import tkinter
import PIL
import PIL.ImageTk
root=tkinter.Tk()
root.configure(background='#FFE4E1')
root.title("photo")
root.geometry("300x300")
image=PIL.Image.open('pig.jpg') #開啟圖片
T_image=PIL.ImageTk.PhotoImage(image) #轉為物件
label=tkinter.Label(image=T_image)
label.pack()

Canvas+Pillow

import tkinter
import PIL
import PIL.ImageTk
root=tkinter.Tk()
root.configure(background='#FFE4E1')
root.title("photo")
root.geometry("300x300")
image=PIL.Image.open('pig.jpg')
T_image=PIL.ImageTk.PhotoImage(image)
canvas=tkinter.Canvas()
canvas.create_image(0,0,image=T_image) 
#canvas中放入照片
canvas.pack()
root.mainloop()

佈局

Pack:兩個物件依照順序擺放

import tkinter 
root=tkinter.Tk() 
root.title("Pack") 
root.geometry("300x200")
label_1=tkinter.Label(text="甲",background="white")
label_2=tkinter.Label(text="甲甲",background="white")
label_1.pack()
label_2.pack()
root.mainloop()

Pack

fill 填滿(x,y,both)
side 位置(left,right,top,bottom)
expand 展開
padx 左右外邊距
pady 上下外邊距
ipadx 左右內邊距
ipady 上下內邊距 
label_1=tkinter.Label(text="甲",background="white")
label_2=tkinter.Label(text="甲甲",background="white")
label_3=tkinter.Label(text="甲甲甲",background="white")
label_4=tkinter.Label(text="甲甲甲甲",background="white")
label_1.pack(fill='x')
label_2.pack(fill='y',padx=10,side='left')
label_3.pack(expand=1,ipady=20)
label_4.pack(expand=1,pady=20,ipadx=20)

Place(絕對位置)

import tkinter 
root=tkinter.Tk() 
root.title("Place") 
root.geometry("300x200")
root.configure(bg='Light blue')
label_1=tkinter.Label(text="甲",background="white")
label_2=tkinter.Label(text="甲甲",background="white")
label_3=tkinter.Label(text="甲甲甲",background="white")
label_4=tkinter.Label(text="甲甲甲甲",background="white")
label_1.place(x=60,y=50)
label_2.place(relx=0.2,rely=0.5)
label_3.place(relx=0.7,rely=0.25)
label_4.place(x=200,y=100)
root.mainloop()

*relx(rely):介於0~1之間

🌰relx=0.2 => 300x0.2=60

Grid(column,row)

import tkinter 
root=tkinter.Tk() 
root.title("Grid") 
root.geometry("300x200")
root.configure(bg='light blue')
label_1=tkinter.Label(text="INFOR",background="green")
label_2=tkinter.Label(text="ZSISC",background="red")
label_3=tkinter.Label(text="CKCSC",background="blue")
label_4=tkinter.Label(text="CMIOC",background="yellow")
label_1.grid(column=0,row=0)
label_2.grid(column=1,row=0)
label_3.grid(column=0,row=1)
label_4.grid(column=1,row=1)
root.mainloop()

Grid(columnspan,rowspan)

label_1=tkinter.Label(text="INFOR",background="green")
label_2=tkinter.Label(text="ZSISC",background="red")
label_3=tkinter.Label(text="CKCSC",background="blue")
label_4=tkinter.Label(text="CMIOC",background="yellow")
label_5=tkinter.Label(text="IZCC",background="black",fg="white")
label_6=tkinter.Label(text="好玩",background="purple")
label_5.grid(column=1, row=0, columnspan=2)
label_2.grid(column=1, row=1, columnspan=2)
label_6.grid(column=3, row=0, rowspan=2)
label_1.grid(column=1, row=3)
label_3.grid(column=2, row=3)
label_4.grid(column=3, row=3)

Anchor

label_1=tkinter.Label(text="INFOR"
                      ,background="green")
label_1.place(x=150,y=100)
import tkinter 
root=tkinter.Tk() 
root.title("Anchor") 
root.geometry("300x200")
root.configure(bg='light blue')
label_1=tkinter.Label(text="INFOR"
                      ,background="green")
label_1.place(x=150,y=100,anchor="center")

root.mainloop()

Anchor

n(紅) 上方
ne(紅) 右上角
e(藍) 右邊
se(藍) 右下角
s(黃) 下方
sw(黃) 左下角
w(綠) 左邊
nw(綠) 左上角
center(芋頭) 中央

Label

要加進火鍋裡

事件處理

Command(觸發事件)

*def(define)

*set(" ") =>(空)

*set(value)=>設置StringVar的值為value

*.get()=>所得的值

*.after([幾毫秒])=>過幾秒後執行

*textvariable=>文字內容受數值改變

import tkinter
root=tkinter.Tk()
root.geometry("300x200")
root.title("Button")
a=tkinter.StringVar()
b=tkinter.StringVar()
a.set('')

def error():
    a.set('')
def show():    
    if b.get()=="學妹早安":
        a.set('安安')
    if b.get()=="替我道歉":
        a.set('學姊對不起')
    if b.get()=="學長好":
        a.set(b.get())
        root.after(2000,error)
 
def clear():
    b.set('')
    entry.delete(0,'end')
hihi=tkinter.Label(textvariable=a)
hihi.pack()
entry=tkinter.Entry(textvariable=b)
entry.pack()

show_btn=tkinter.Button(text="回覆",command=show)
clear_btn=tkinter.Button(text="清除",command=clear)
show_btn.pack()
clear_btn.pack()
root.mainloop()

結束了!!!

Tkinter

By chainy

Made with Slides.com

Tkinter

  • 345

More from chainy