# Tkinter ## 一、簡介 Tkinter 是一款真正的圖形化介面工具 --- ## 二、引用Tkinter ### 1、引用tkinter有兩種: #### 第一種:import tkinter as tk #### 第二種:from tkinter import* --- 第一種 ```python= import tkinter as tk win = tk.Tk() #建立視窗 win.title("HaHaBall") #更改標題 win.mainloop() #常駐主視窗 ``` --- 第二種 ```python= from tkinter import* win = Tk() #建立視窗 win.title("HaHaBall") #更改標題 win.mainloop() #常駐主視窗 ``` ### 2、這兩種有什麼差?: 使用"import tkinter as tk"時,每次使用tkinter裡的功能時皆須加上"tk.",Ex:"win = tk.TK()" 但若是使用"from tkinter import*"的話就不用,Ex:"win = TK()" 因此第二種寫起來比較方便,但如果是在做較大的專案開發時較推薦使用第一種,因為讀起來比較清楚,不怕搞混。但因為我們這次是做小開發,所以選用第二種,我就懶👍 ### 3、import 是什麼? 在python中,我們可以用import來匯入模組(module) <-- 神奇妙妙工具 像是我們要用tkinter時,就需要先打一行"import tkinter" 那為什麼第一種寫法的後面還有"as tk"呢? 因為我們每次要使用tkinter裡面的功能時皆須在前面加上"tkinter.",這實在太麻煩了,所以"as tk"就是指以tk作為tkinetr的代稱,這樣就只要寫"tk."就好了,我就懶👍 --- ## 成果展示 ![](https://i.imgur.com/VawZCzc.png) --- ## 三、How to make? 講了那麼多廢話,所以她到底有什麼功能呢?我們速速進入主題。GO~ ### 1、建立視窗 win = Tk() 首先我們要先建立視窗 ```python= from tkinter import* win = Tk() #建立視窗 win.mainloop() #常駐主視窗 ``` 1. 引用tkinter函式庫 2. 建立視窗(以win為例) 3. 使視窗常駐 只要這樣寫,再按下執行,神奇的事情就發生了! ![](https://i.imgur.com/2X1PwK1.png) 我們就成功生出一個醜醜的視窗了,要怎麼把它變美美呢?先別急,我們一步一步來,首先我們先來解釋"win.mainloop()"是什麼? **它的功用就用來讓win這個視窗常駐出現 就是這麼簡單,要記得這行指令要放在最後面** ### 2、改變視窗標題 win.title() 把視窗叫出來後,我們會發現左上角得標題為tk,這個時候就要使用win.title()來改成你想要的標題 ```python= win.title("猜單字遊戲") #視窗標題 ``` ![](https://i.imgur.com/tn0RF7s.png) ### 3、視窗大小調整 win.geometry() 接著你會發現視窗有點小,這時就要用 win.geometry()來調整大小 ```python= win.geometry("800x400") #視窗大小 ``` 這樣當你把視窗叫出來時它就會是800x400 前面為寬,後面為 ### 4、其他關於視窗的指令 #### 改變背景顏色 ```python= win.config(bg = "#333333") #視窗顏色 ``` 若你覺得總是白色很無聊,那麼你能用win.config(bg = "")來改變顏色,**bg**也就是**background**指的是**背景顏色**,而" "裡放的是你想要的顏色,而上面的#333333則是色碼 找你想要的顏色色碼的方便東東[https://www.ifreesite.com/color/](https://) #### 視窗不可縮放 ```python= win.resizable(False, True) #使主視窗不可縮放 ``` 你會發現雖然你規定了視窗的大小為800x400,但你仍可以滑鼠調整視窗大小,所以你可以使用win.resizable(False, True)來讓視窗大小固定。 試著加上這行後再調看看大小,觀察長和寬哪邊是可以調整的?這樣便能知道True和False所代表的意思 #### 使主視窗置頂 ```python= win.attributes("-topmost", 1) #使主視窗置頂 ``` 這行指令能讓你的主視窗置頂,不怕突然被其他視窗蓋住,影響好心情。 試著改變("-topmost", 1)裡的數字為0看看會發生什麼事? ### 5、標籤Label 若你想在畫面上寫點什麼的話,可以使用Label ![](https://i.imgur.com/7wYlJkR.png) ### 建立標籤-標題 ```python= lb_title = Label(text = "猜單字遊戲") lb_title.config = (bg = "#333333", fg = "white", font = "微軟正黑體 26 bold") lb_title.pack() ``` 這樣就完成了標籤標題的製作,但這是怎麼做到的呢? **以下是關於Label的基本操作介紹** #### 如何建立標籤 ```python= lb = Label() lb.config(text = "猜單字遊戲") lb.pack() ``` 第一行是將一個Label命名為lb,這樣以後我們就可以對lb進行更動。 第二行是將lb的text改為你想要輸出的文字 第三行是將這個標籤放在視窗上,這樣才看的到 ![](https://i.imgur.com/n3XBK5j.png) #### 改變標籤背景色 ```python= lb.config(bg = "#333333") ``` 跟前面改變視窗背景色類似 #### 改變文字顏色 ```python= lb.config(fg = "white") ``` fg指的是文字的顏色,改變顏色的寫法都大同小異 #### 更多字體細節 ```python= lb.config(font = "微軟正黑體 26 bold") ``` font指的是你的字體,而font = "" 裡放的這三個分別是"**字體樣式 字體大小 粗體(可有可無)**" #### 簡潔寫法 上述lb.config()的括號可以容納百川,可以直接都寫在一起 ```python= lb.config(text = "猜單字遊戲", bg = "#333333", fg = "white", font = "微軟正黑體 26") ``` 當然還有**更簡潔**的寫法,就是在創造一個標籤時直接給予 ```python= lb = Label(text = "猜單字遊戲", bg = "#333333", fg = "white", font = "微軟正黑體 26") lb.pack() ``` ![](https://i.imgur.com/dqMjEwa.png) 現在我們已經知道要如何製作標籤了,那接下來就是要把其他標籤也加上去 ### 建立標籤-提示 ```python= lb_output = Label(text = f'請輸入單字, 共{answer_len}個字母') lb_output.config = (bg = "#333333", fg = "white", font = "微軟正黑體 20 bold") #輸出 lb_output.pack() ``` ### 建立標籤-歷史紀錄 ```python= lb_history = Label(text = history) lb_history.config = (bg = "#333333", fg = "white", font = "微軟正黑體 10 bold") lb_history.place(anchor = "nw") ``` ### 建立標籤-回合數 ```python= lb_game_round = Label(text = f'第{game_round}回合') lb_game.config = (bg = "#333333", fg = "white", font = "微軟正黑體 20 bold") lb_game_round.place(x = 680) ``` 我們發現這兩個標籤的最後一行居然不是用我們熟悉的pack()而是使用place(),這是為什麼呢?以及place()要怎麼用呢?那就讓我們先跳到**8、放置Play**,來看看pack()和place()之間的差異吧! --- ### 6、輸入格Entry 現在要來介紹Entry,一款猜單字遊戲一定要有東西可以輸入單字和接收你猜的單字,所以Entry就很重要。 那Entry是什麼呢?簡單來說它就是一個輸入格,你可以輸入各種東西 ![](https://i.imgur.com/x2Dgpkd.png) ### 建立輸入列 ```python= en = Entry(font = "微軟正黑體 15 bold") #輸入 en.pack() ``` 1. 建立輸入列(以en為例) 2. 打包輸入列 這樣就完成了輸入列的製作,但這是怎麼做到的呢? **以下是關於Entry的基本操作介紹** #### 如何建立Entry ```python= en = Entry() #輸入 en.pack() ``` ![](https://i.imgur.com/yS30gn4.png) 如同標籤或按鈕,你也可以修改字體,但是是你輸入時的字體 ```python= en = Entry(font = "微軟正黑體 15 bold") ``` 試著改改看,是哪裡發生了改變? . . . **在這裡的字體大小也會影響到輸入格的大小** --- ### 7、按鈕Button 一個可互動的遊戲一定要有按鈕,這時該怎麼辦呢? ![](https://i.imgur.com/vKWTKfi.png) ### 建立按鈕 ```python= btn_submit = Button(text = "送出") btn_submit.config = (font = "微軟正黑體 15 bold", command = game, width = 3, height = 1) btn_submit.pack() ``` 1. 建立送出按鈕(以btn_submit為例) 2. 打包按鈕 這樣就完成了按鈕的製作,但這是怎麼做到的呢? **以下是關於Button的基本操作介紹** ```python= btn = Button() btn.pack() ``` ![](https://i.imgur.com/qGsVx5z.png) 現在你有一個按鈕了,但它看起來完全不知道是拿來做什麼的,所以需要再加一點神奇魔法 #### 在按鈕上顯示文字 ```python= btn.config(text = "送出") ``` #### 更多字體細節 ```python= btn.config(font = "微軟正黑體 15 bold") ``` 就更前面改變標籤用法一樣就不多提了 #### 改變按鈕大小 ```python= btn.config(width = 3, height = 1) ``` width 為寬度,height為高度 ![](https://i.imgur.com/Avx96X0.png) #### 按鈕的功能 現在你的按鈕看起來有模有樣,但它卻仍然一點用處都沒有,因此現在我們要來為它加上有用的功能 ```python= def push(): lb.config(text = "peepoclap") ``` 首先我們先寫一個函式名為 push,只要執行它就將我們前面做的標籤 lb 的文字改為 peepoclap 現在我們已經完成這個功能了,那要怎們讓它更按鈕作結合呢? ```python= btn.config(command = push) ``` 把這行加上去後,再去按你的按鈕,看看會發生什麼事? . . ... 現在你的按鈕有功能了! ![](https://media.tenor.com/2kUVEuO_VDkAAAAd/peepo-clap.gif) ### 8、放置Play 現在你已經可以在你的視窗上擺上各種雜七雜八的東西了,但若是胡亂擺上去會導致畫面很亂,要請主辦單位管一下,但要怎麼管呢?在tkinter中提供三種方法,分別是pack()、grid()、place() #### pack() 仔細看會發現,每次有設置新的物件時都會加上pack(),這就是最基本的放置,他會是由上往下。 而pack()也有其他用途,舉例: ```python= btn = Button(text = "Button") btn.pack(side = TOP) btn = Button(text = "Button") btn.pack(side = BOTTOM) btn = Button(text = "Button") btn.pack(side = RIGHT) btn = Button(text = "Button") btn.pack(side = LEFT) ``` ![](https://i.imgur.com/6x0XPrd.png) #### grid() 網格構圖 grid()也就是網格構圖的使用方法為下: ![](https://i.imgur.com/6WAMqec.png) ```python= lb1 = Label(text = "label1") lb1.grid(row = 0, column = 0) en1 = Entry().grid(row = 0, column = 1) lb2 = Label(text = "label2") lb2.grid(row = 1, column = 0) en2 = Entry().grid(row = 1, column = 1) ``` ![](https://i.imgur.com/5Xw03rL.png) ##### **注意:grid不可和pack一起用,會出錯** #### place() 用法示範 ```python= btn = Button(text = "Button") btn.place(x =20, y = 20) ``` 在這段程式碼中的x和y分別是代表距離原點的x距離和y距離,而原點的預設值是在視窗的左上角,而物件的中心也是在左上角,因此如果我的畫面是800x400,然後我設物件放在"x = 400, y = 200",結果會發現他並不會出現在正中央,因此若要達成這件事,就必須要用到anchor來改變物件中心 ![](https://i.imgur.com/7MHaaxq.png) ```python= btn = Button(text = "Button") btn.place(anchor = CENTER,x = 400, y = 200) ``` ![](https://i.imgur.com/eqPPq7u.png)