---
# System prepended metadata

title: Tkinter
tags: [通識, Tools]

---

# 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)

