Python GUI

什麼是 GUI?

Graphical User Interface

圖形使用者介面

我們能用他幹嘛?

創建視窗

import tkinter as tk

window = tk.Tk()#視窗物件
window.title('My GUI')#標題
window.geometry('1000x500')
#視窗長寬(寬x高)(注意:請將寬設在150以上，以免影響右上角的東東)
window.mainloop()
#讓他一直跑一直跑一直跑....直到按下右上角叉叉為止

元件:標籤

就是最基本的顯示元件啦

import tkinter as tk

window = tk.Tk()
window.title('My GUI')
window.geometry('1000x500')
capo=tk.PhotoImage(file="example image\\capo.gif")#圖像物件
#file:圖像檔案位置(注意:如果該圖檔和此.py檔同目錄，則只需要輸入該目錄以後的路徑即可)(注意:圖檔只能套用GIF、PPM、和GPM)
Lt=tk.Label(window,text='陳炫佑請拉麵!!',bg='Sienna',height=2,width=20,font=('標楷體',30))#標籤物件
Li=tk.Label(window,image=capo,bg='Sienna',height=300,width=300)#標籤物件
#第一個:歸在誰之下
#text:文字內容
#bg:背景顏色
#height:高度
#width:寬度
#font:字體&字型大小
#image:圖像物件
#*有長寬單位不統一問題*
Lt.pack()#把物件放入畫面(垂直堆疊)
Li.pack()
window.mainloop()

元件:按鈕

就是最基本的控制元件啦

import tkinter as tk

window = tk.Tk()
window.title('My GUI')
window.geometry('1000x500')
L=tk.Label(window,text='陳炫佑請拉麵!!',bg='Sienna',height='3',width='50',font=('標楷體',30))
L.pack()
def cmd():
    L.config(text='Kew Kew')#改變L(標籤物件)的屬性(文字內容,背景顏色,高度,寬度,字體&字型大小...等等)
B=tk.Button(window,text='卡!',height='1',width='25',bg='red',font=('標楷體',30),command=cmd)#按鈕物件
#第一個:歸在誰之下
#text:文字內容
#bg:背景顏色
#height:高度
#width:寬度
#font:字體&字型大小
#image:圖像物件
#command:按下時會執行的函數
B.pack()
window.mainloop()

元件:輸入框

做表單、密碼輸入器的好幫手!

import tkinter as tk

window = tk.Tk()
window.title('My GUI')
window.geometry('1000x500')
def cmd():
    enter=password_box.get()
    if enter=="1234":
        l.config(text='密碼正確')
    else :
        l.config(text='密碼不正確')
password_box=tk.Entry(window,show="*")#輸入欄物件
#第一個:歸在誰之下
#show:輸入替換功能
b=tk.Button(window,text="Enter",command=cmd)
l=tk.Label(window,text='請輸入密碼:',bg='white',height='3',width='50',font=('標楷體',30))
l.pack()
password_box.pack()
b.pack()
window.mainloop()

元件:選擇按鈕

做表單的好幫手!

import tkinter as tk

window = tk.Tk()
window.title('My GUI')
window.geometry('1000x500')
L=tk.Label(window,text='選一個語言學吧!',bg='aqua',height='3',width='50',font=('標楷體',30))
L.pack()
val=tk.IntVar()#tkinter內建的整數變數(為了要套用選擇按鈕QAQ)
val.set(-1)#將val設為-1
r1=tk.Radiobutton(window,variable=val,value=0,text='C++')#選擇按鈕物件
#第一個:歸在誰之下
#text:文字內容
#command:按下時會執行的函數
#點案該按鈕，會將參數"variable"的變數設為"value"的值
r2=tk.Radiobutton(window,variable=val,value=1,text='python')
r3=tk.Radiobutton(window,variable=val,value=2,text='java')
r1.pack()
r2.pack()
r3.pack()
def cmd():
    choice=val.get()#將tk.IntVar()轉為正常int
    if choice==0:
        L.config(text="Let's learn algorithm!")
    if choice==1:
        L.config(text="Let's learn GUI!")
    if choice==2:
        L.config(text="Let's learn ...等等!講師不會!跳過!!")
    
B=tk.Button(window,text='Learn!',height='1',width='25',bg='red',font=('標楷體',30),command=cmd)
B.pack()
window.mainloop()
#*排版歪歪斜斜*

排版常用技巧

import tkinter as tk

window = tk.Tk()
window.title('My GUI')
window.geometry('425x500')
image1=tk.PhotoImage(file='example image\\despicable.gif')#圖像物件
#file:檔案位置(注意:如和.py檔同目錄，只需要給該目錄以後的路徑)
block1=tk.Frame(window,height=200,width=200,bg='red')#邊框物件
#第一個:歸在誰之下
#height:高度
#width:寬度
#bg:背景顏色
block2=tk.Frame(window,height=200,width=200,bg='green')
block3=tk.Frame(window,height=200,width=200,bg='blue')
block4=tk.Frame(window,height=200,width=200,bg='yellow')
bb=tk.Frame(window,height=75,width=200,bg='black')
block1.place(x=000,y=000)#將該物件放到其主物件的指定位置(瞄點:左上角)
block2.place(x=225,y=000)
block3.place(x=000,y=225)
block4.place(x=225,y=225)
bb.place(x=112.5,y=425)
block1.pack_propagate(0)#讓邊框物件不隨內容物的大小改變
block2.pack_propagate(0)
block3.pack_propagate(0)
block4.pack_propagate(0)
bb.pack_propagate(0)
dialogue1=tk.Label(block1,text='陳炫佑:林哲宇你講義生好沒?',font=('標楷體',10),bg='green',height=200,width=200)
#在邊框物件中放入內容物(注意:因為前面的pack_propagate已把邊框物件的大小"定住"，所以此內容物的長寬可盡量開大以填滿邊框)
dialogue1.pack()
dialogue2=tk.Label(block2,text='我:我deadline前絕對生好',font=('標楷體',10),bg='green',height=200,width=200)
dialogue2.pack()
dialogue3=tk.Label(block3,text='*deadline當天*\n陳炫佑:欸林哲宇你的講義呢?',font=('標楷體',10),bg='green',height=200,width=200)
dialogue3.pack()
dialogue4=tk.Label(block4,text='我:',font=('標楷體',30),bg='green',height=200,width=200)
dialogue4.pack()
#為什麼要用邊框物件:他的長寬單位和視窗geometry的單位一模一樣!!
window.mainloop()

範例:四格漫畫

import tkinter as tk

window = tk.Tk()
window.title('My GUI')
window.geometry('425x500')
despicable=tk.PhotoImage(file="example image\\despicable.gif")
block1=tk.Frame(window,height=200,width=200,bg='red')
block2=tk.Frame(window,height=200,width=200,bg='green')
block3=tk.Frame(window,height=200,width=200,bg='blue')
block4=tk.Frame(window,height=200,width=200,bg='yellow')
image_frame=tk.Frame(window,height=425,width=425)
bb=tk.Frame(window,height=75,width=200,bg='black')
block1.place(x=000,y=000)
block2.place(x=225,y=000)
block3.place(x=000,y=225)
block4.place(x=225,y=225)
bb.place(x=112.5,y=425)
block1.pack_propagate(0)
block2.pack_propagate(0)
block3.pack_propagate(0)
block4.pack_propagate(0)
bb.pack_propagate(0)
image_frame.pack_propagate(0)
dialogue1=tk.Label(block1,text='陳炫佑:\n林哲宇你講義生好沒?',font=('標楷體',15),bg='green',height=200,width=200)
dialogue2=tk.Label(block2,text='我:\n我deadline前絕對生好',font=('標楷體',15),bg='green',height=200,width=200)
dialogue3=tk.Label(block3,text='*deadline當天*\n陳炫佑:\n欸林哲宇你的講義呢?',font=('標楷體',15),bg='green',height=200,width=200)
dialogue4=tk.Label(block4,text='我:\n\n\n\n\n還沒開始生',font=('標楷體',15),bg='green',height=200,width=200)
picture=tk.Label(image_frame,image=despicable,bg='red',height=1000,width=1000)
picture.pack()
step=0
def cmd():
    global step
    if step==0:
        dialogue1.pack()
    if step==1:
        dialogue2.pack()
    if step==2:
        dialogue3.pack()
    if step==3:
        dialogue4.pack()
    if step==4:
        dialogue1.pack_forget()
    if step==5:
        dialogue2.pack_forget()
    if step==6:
        dialogue3.pack_forget()
    if step==7:
        dialogue4.pack_forget()
    if step==8:
        image_frame.place(x=0,y=0)
    step+=1
    
B=tk.Button(bb,text='下一頁',height=100,width=100,bg='white',font=('標楷體',30),command=cmd)
B.pack()
window.mainloop()

案件觸發事件

用鍵盤控制我們的GUI

import tkinter as tk

window = tk.Tk()
window.title('My GUI')
window.geometry('1000x500')
L=tk.Label(window,text='陳炫佑請拉麵!!\n想卡請按enter',bg='Sienna',height='3',width='50',font=('標楷體',30))
L.pack()
def cmd(key):
    L.config(text='Kew Kew')
window.focus_set()#使GUI可接收鍵盤指令
window.bind('<Return>', cmd)#定義GUI接收鍵盤指令時的動作
#第一個:綁定哪個鍵盤
#(<A>:A鍵,<B>:B鍵,<C>:C鍵...,<space>:空白鍵,<Up>:上鍵,<Down>:下鍵,<Left>:左鍵,<Right>:右鍵,<Return>:enter鍵,<Key>:鍵盤)
#第二個:按下時會執行的函數
window.mainloop()
import tkinter as tk

window = tk.Tk()
window.title('My GUI')
window.geometry('1000x500')
L=tk.Label(window,text='陳炫佑請拉麵!!\n想卡請按空白鍵',bg='Sienna',height='3',width='50',font=('標楷體',30))
L.pack()
def cmd(key):
    if key.keycode==32:
        #key.keycode:該鍵盤的ASCII code
        L.config(text='Kew Kew')
window.focus_set()#使GUI可接收鍵盤指令
window.bind('<Key>', cmd)#定義GUI接收鍵盤指令時的動作
#第一個:綁定哪個鍵盤
#(<A>:A鍵,<B>:B鍵,<C>:C鍵...,<space>:空白鍵,<Up>:上鍵,<Down>:下鍵,<Left>:左鍵,<Right>:右鍵,<Return>:enter鍵,<Key>:鍵盤)
#第二個:按下時會執行的函數
window.mainloop()

元件:畫布

用它來做各種動畫!

import tkinter as tk
import time

window = tk.Tk()
window.title('My GUI')
window.geometry('1000x500')
image_of_link=tk.PhotoImage(file='example image\\link.gif')
image_of_link_attack=tk.PhotoImage(file='example image\\linkf.gif')
image_of_link_left=tk.PhotoImage(file='example image\\linkwl.gif')
image_of_link_right=tk.PhotoImage(file='example image\\linkwr.gif')
image_of_link_back=tk.PhotoImage(file='example image\\linkwb.gif')
canvas=tk.Canvas(window,width=1000,height=500,bg='green')#畫布物件
#第一個:歸在誰之下
#height:高度
#width:寬度
#bg:背景顏色
link=canvas.create_image(500,250,anchor='center',image=image_of_link)#canvas物件內的圖片
#第一個:該圖在畫布中的x座標
#第二個:該圖在畫布中的y座標
#anchor:以該圖的哪個位置為瞄點(n:上方,s:下方,w:左方,e:右方,nw:左上,ne:右上,sw:左下,se:右下,center:中間)
#image:圖像物件
def cmd(key):
    if chr(key.keycode)=='A' or chr(key.keycode)=='a':
        canvas.itemconfig(link,image=image_of_link_left)#更換canvas內圖片物件的圖片
        #第一個:想更換的物件
        #image:想要'換成'的圖
        canvas.move(link,-5,0)#移動canvas內圖片物件
        #第一個:想移動的物件
        #第二個:想要往右的像素數
        #第三個:想要往下的像素數
    if chr(key.keycode)=='D' or chr(key.keycode)=='d':
        canvas.itemconfig(link,image=image_of_link_right)
        canvas.move(link,5,0)
    if chr(key.keycode)=='W' or chr(key.keycode)=='w':
        canvas.itemconfig(link,image=image_of_link_back)
        canvas.move(link,0,-5)
    if chr(key.keycode)=='S' or chr(key.keycode)=='s':
        canvas.itemconfig(link,image=image_of_link)
        canvas.move(link,0,5)
    
window.focus_set()
window.bind('<Key>', cmd)
canvas.pack()
window.mainloop()
import tkinter as tk
import time

window = tk.Tk()
window.title('My GUI')
window.geometry('1000x500')
image_of_link=tk.PhotoImage(file='example image\\link.gif')
image_of_link_attack=tk.PhotoImage(file='example image\\linkf.gif')
image_of_link_left=tk.PhotoImage(file='example image\\linkwl.gif')
image_of_link_right=tk.PhotoImage(file='example image\\linkwr.gif')
image_of_link_back=tk.PhotoImage(file='example image\\linkwb.gif')
wall_image=tk.PhotoImage(file='example image\\wall1.gif')
canvas=tk.Canvas(window,width=1000,height=500,bg='green')
link=canvas.create_image(500,250,anchor='center',image=image_of_link)
wall=canvas.create_image(500,350,anchor='center',image=wall_image)
def cmd(key):
    if chr(key.keycode)=='A' or chr(key.keycode)=='a':
        canvas.itemconfig(link,image=image_of_link_left)
        canvas.move(link,-5,0)
    if chr(key.keycode)=='D' or chr(key.keycode)=='d':
        canvas.itemconfig(link,image=image_of_link_right)
        canvas.move(link,5,0)
    if chr(key.keycode)=='W' or chr(key.keycode)=='w':
        canvas.itemconfig(link,image=image_of_link_back)
        canvas.move(link,0,-5)
    if chr(key.keycode)=='S' or chr(key.keycode)=='s':
        canvas.itemconfig(link,image=image_of_link)
        canvas.move(link,0,5)
    if abs(canvas.coords(link)[0] - canvas.coords(wall)[0]) < 45 and abs(canvas.coords(link)[1] - canvas.coords(wall)[1])<45:
        #canvas.coords(圖像):傳回一個兩項的list，第一項是x座標，第二項是y座標
        if chr(key.keycode)=='A' or chr(key.keycode)=='a':
            canvas.itemconfig(link,image=image_of_link_left)
            canvas.move(link,5,0)
        if chr(key.keycode)=='D' or chr(key.keycode)=='d':
            canvas.itemconfig(link,image=image_of_link_right)
            canvas.move(link,-5,0)
        if chr(key.keycode)=='W' or chr(key.keycode)=='w':
            canvas.itemconfig(link,image=image_of_link_back)
            canvas.move(link,0,5)
        if chr(key.keycode)=='S' or chr(key.keycode)=='s':
            canvas.itemconfig(link,image=image_of_link)
            canvas.move(link,0,-5)

window.focus_set()
window.bind('<Key>', cmd)
canvas.pack()
window.mainloop()

更改GUI logo

做個有個性的應用程式吧!

import tkinter as tk

window1 = tk.Tk()
window1.title('My GUI1')
window1.geometry('1000x500')
logo=tk.PhotoImage(file='example image\\link.gif')
window1.iconphoto(False,logo)#更改GUI logo
#第一個:是否影響其他視窗
#第二個:想當logo的圖片
window2 = tk.Tk()
window2.title('My GUI2')
window2.geometry('1000x500')
window1.mainloop()
window2.mainloop()
Made with Slides.com