---
title: 'GUI guide'
disqus: hackm
---
GUI guide
===
## Table of Contents
[TOC]
## Beginners Guide
> 參考網址:https://www.itread01.com/content/1547705544.html
核心視窗物件概覽
1. Button：一個簡單的按鈕，用來執行一個命令或別的操作。
2. Canvas：組織圖形。這個部件可以用來繪製圖表和圖，建立圖形編輯器，實現定製視窗部件。
3. Checkbutton：代表一個變數，它有兩個不同的值。點選這個按鈕將會在這兩個值間切換。
4. Entry：文字輸入域。
5. Frame：一個容器視窗部件。幀可以有邊框和背景，當建立一個應用程式或dialog(對話）版面時，幀被用來組織其它的視窗部件。
6. Label：顯示一個文字或圖象。
7. Listbox：顯示供選方案的一個列表。listbox能夠被配置來得到radiobutton或checklist的行為。
8. Menu：選單條。用來實現下拉和彈出式選單。
9. Menubutton：選單按鈕。用來實現下拉式選單。
10. Message：顯示一文字。類似label視窗部件，但是能夠自動地調整文字到給定的寬度或比率。
11. Radiobutton：代表一個變數，它可以有多個值中的一個。點選它將為這個變數設定值，並且清除與這同一變數相關的其它radiobutton。
12. Scale：允許你通過滑塊來設定一數字值。
13. Scrollbar：為配合使用canvas, entry, listbox, and text視窗部件的標準滾動條。
14. Text：格式化文字顯示。允許你用不同的樣式和屬性來顯示和編輯文字。同時支援內嵌圖象和視窗。
15. Toplevel：一個容器視窗部件，作為一個單獨的、最上面的視窗顯示。
16. messageBox：訊息框，用於顯示你應用程式的訊息框。
基本功能
===
## 1.建立主視窗及Label
1. 示例程式碼：
```gherkin=
# 使用Tkinter前需要先匯入
import tkinter as tk
class basedesk():
def __init__(self,master):
#第2步，實體化視窗
self.root = master
self.root.config()
self.root.title('Base page')
# 視窗大小 (長 x 寬)
self.root.geometry('500x400')
#凍結視窗(無法調整大小)
self.root.resizable(width=False, height=False)
#第3步，在圖形介面上設定標籤
#說明： bg為背景，font為字型，width為長，height為高，這裡的長和高是字元的長和高，比如height=2,就是標籤有2個字元這麼高
header_label = tk.Labeltk.Label(root, text='你好！this is Tkinter', bg='green', font=('Arial', 12), width=30, height=2)
header_label.pack()
initface(self.root)
if __name__ == '__main__':
# 第1步，建立視窗root
root = tk.Tk()
basedesk(root)
#第4步，主視窗迴圈顯示
root.mainloop()
#注意，loop因為是迴圈的意思，root.mainloop就會讓root不斷的重新整理，如果沒有mainloop, 就是一個靜態的root,傳入進去的值就不會有迴圈，mainloop就相當於一個很大的while迴圈，有個while，每點選一次就會更新一次，所以我們必須要有迴圈
# 所有的視窗檔案都必須有類似的mainloop函式，mainloop是視窗檔案的關鍵的關鍵。
```
## 2.Button
1. 簡單說明：
Button（按鈕）部件是一個標準的Tkinter視窗部件，用來實現各種按鈕。按鈕能夠包含文字或圖象，並且你能夠將按鈕與一個Python 函式或方法相關聯。當這個按鈕被按下時，Tkinter自動呼叫相關聯的函式或方法。
按鈕僅能顯示一種字型，但是這個文字可以跨行。另外，這個文字中的一個字母可以有下劃線，例如標明一個快捷鍵。預設情況，Tab鍵用於將焦點移動到一個按鈕部件。
2. 什麼時候用按鈕部件
簡言之，按鈕部件用來讓使用者說“馬上給我執行這個任務”，通常我們用顯示在按鈕上的文字或圖象來提示。按鈕通常用在工具條中或應用程式視窗中，並且用來接收或忽略輸入在對話方塊中的資料。關於按鈕和輸入的資料的配合，可以參看Checkbutton和Radiobutton部件。
3. 示例程式碼：
```gherkin=
btn = tk.Button(self.initface,text='conn_zernet',command = self.conn_zernet,height = 1,width = 15)
btn.pack(pady=(0,15))
```
> command 為自訂義function
## 3.Entry
1. 簡單說明：
Entry是tkinter類中提供的的一個單行文字輸入域，用來輸入顯示一行文字，收集鍵盤輸入(類似 HTML 中的 text)。
2. 什麼時候用：
需要使用者輸入使用者資訊時，比如我們平時使用軟體、登入網頁時，使用者互動介面讓我們登入賬戶資訊等時候可以用到。
3. 示例程式碼：
```gherkin=
e1 = tk.Entry(root, show='*', font=('Arial', 14)) # 顯示成密文形式
e2 = tk.Entry(root, show=None, font=('Arial', 14)) # 顯示成明文形式
e1.pack()
e2.pack()
```
## 4.Text
1. 簡單說明：
Text是tkinter類中提供的的一個多行文字區域，顯示多行文字，可用來收集(或顯示)使用者輸入的文字(類似 HTML 中的 textarea)，格式化文字顯示，允許你用不同的樣式和屬性來顯示和編輯文字，同時支援內嵌圖象和視窗。
2. 什麼時候用：
在需要顯示編輯使用者、產品多行資訊時，比如顯示使用者詳細描述文字，產品簡介等等，支援隨時編輯。
3. 示例程式碼：
```gherkin=
# 建立並放置一個多行文字框text用以顯示，指定height=3為文字框是三個字元高度
t = tk.Text(root, height=3)
t.pack()
```
## 5.Listbox
1. 簡單說明：
Text是tkinter類中提供的的列表框部件，顯示供選方案的一個列表。listbox能夠被配置來得到radiobutton或checklist的行為。
2. 什麼時候用：
在有一個很多內容選項組成的列表提供使用者選擇時會用到。
3. 示例程式碼：
```gherkin=
# 建立Listbox
lb = tk.Listbox(root, listvariable=(1,2,3))
# 建立一個list並將值迴圈新增到Listbox控制元件中
list_items = [11,22,33,44]
for item in list_items:
lb.insert('end', item) # 從最後一個位置開始加入值
lb.insert(1, 'first') # 在第一個位置加入'first'字元
lb.insert(2, 'second') # 在第二個位置加入'second'字元
lb.delete(2) # 刪除第二個位置的字元
lb.pack()
```
## 6.Radiobutton
1. 簡單說明：
Radiobutton：代表一個變數，它可以有多個值中的一個。點選它將為這個變數設定值，並且清除與這同一變數相關的其它radiobutton。
2. 什麼時候用：
在有一個很多內容選項組成的選項列表提供使用者選擇時會用到，使用者<font color="#f00">一次只能選擇其中一個，不能多選</font>。
3. 示例程式碼：
```gherkin=
# 第1步，定義選項觸發函式功能
def print_selection():
l.config(text='you have selected ' + var.get())
# 第2步，建立三個radiobutton選項，其中variable=var, value='A'的意思就是，當我們滑鼠選中了其中一個選項，把value的值A放到變數var中，然後賦值給variable
r1 = tk.Radiobutton(root, text='Option A', variable=var, value='A', command=print_selection)
r1.pack()
r2 = tk.Radiobutton(root, text='Option B', variable=var, value='B', command=print_selection)
r2.pack()
r3 = tk.Radiobutton(root, text='Option C', variable=var, value='C', command=print_selection)
r3.pack()
```
## 7.Checkbutton
1. 簡單說明：
Checkbutton：代表一個變數，它有兩個不同的值。點選這個按鈕將會在這兩個值間切換，選擇和取消選擇。
2. 什麼時候用：
在有一個很多內容選項組成的選項列表提供使用者選擇時會用到，使用者一次可以選擇多個。
3. 示例程式碼：
```gherkin=
l = tk.Label(root, bg='yellow', width=20, text='empty')
l.pack()
# 第2步，定義觸發函式功能
def print_selection():
# 如果選中第一個選項，未選中第二個選項
if (var1.get() == 1) & (var2.get() == 0):
l.config(text='I love only Python ')
# 如果選中第二個選項，未選中第一個選項
elif (var1.get() == 0) & (var2.get() == 1):
l.config(text='I love only C++')
# 如果兩個選項都未選中
elif (var1.get() == 0) & (var2.get() == 0):
l.config(text='I do not love either')
# 如果兩個選項都選中
else:
l.config(text='I love both')
# 第1步，定義兩個Checkbutton選項並放置
# 定義var1和var2整型變數用來存放選擇行為返回值
var1 = tk.IntVar()
var2 = tk.IntVar()
# 傳值原理類似於radiobutton部件
c1 = tk.Checkbutton(root, text='Python',variable=var1, onvalue=1, offvalue=0, command=print_selection)
c1.pack()
c2 = tk.Checkbutton(root, text='C++',variable=var2, onvalue=1, offvalue=0, command=print_selection)
c2.pack()
```
## 8.Scale
1. 簡單說明：
Scale： 尺度（拉動條），允許你通過滑塊來設定一數字值。
2. 什麼時候用：
在需要使用者給出評價等級，或者給出一個評價分數，或者拉動滑動條提供一個具體的數值等等。
3. 示例程式碼：
```gherkin=
# 第1步，在圖形介面上建立一個標籤label用以顯示並放置
l = tk.Label(root, bg='green', fg='white', width=20, text='empty')
l.pack()
# 第3步，定義一個觸發函式功能
def print_selection(v):
l.config(text='you have selected ' + v)
# 第2步，建立一個尺度滑條，長度200字元，從0開始10結束，以2為刻度，精度為0.01，觸發呼叫print_selection函式
s = tk.Scale(root, label='try me', from_=0, to=10, orient=tk.HORIZONTAL, length=200, showvalue=0,tickinterval=2, resolution=0.01, command=print_selection)
s.pack()
```
## 9.Canvas
1. Canvas：畫布，提供繪圖功能(直線、橢圓、多邊形、矩形) 可以包含圖形或點陣圖，用來繪製圖表和圖，建立圖形編輯器，實現定製視窗部件。
2. 什麼時候用：
在比如像使用者互動介面等，需要提供設計的圖示、圖形、logo等資訊是可以用到畫布。
3. 示例程式碼：
```gherkin=
# 第1步，在圖形介面上建立 500 * 200 大小的畫布並放置各種元素
canvas = tk.Canvas(root, bg='green', height=200, width=500)
# 說明圖片位置，並匯入圖片到畫布上
image_file = tk.PhotoImage(file='pic.gif') # 圖片位置（相對路徑，與.py檔案同一資料夾下，也可以用絕對路徑，需要給定圖片具體絕對路徑）
image = canvas.create_image(250, 0, anchor='n',image=image_file) # 圖片錨定點（n圖片頂端的中間點位置）放在畫布（250,0）座標處
# 定義多邊形引數，然後在畫布上畫出指定圖形
x0, y0, x1, y1 = 100, 100, 150, 150
line = canvas.create_line(x0-50, y0-50, x1-50, y1-50) # 畫直線
oval = canvas.create_oval(x0+120, y0+50, x1+120, y1+50, fill='yellow') # 畫圓 用黃色填充
arc = canvas.create_arc(x0, y0+50, x1, y1+50, start=0, extent=180) # 畫扇形 從0度開啟收到180度結束
rect = canvas.create_rectangle(330, 30, 330+20, 30+20) # 畫矩形正方形
canvas.pack()
# 第3步，觸發函式，用來一定指定圖形
def moveit():
canvas.move(rect, 2, 2) # 移動正方形rect（也可以改成其他圖形名字用以移動一起圖形、元素），按每次（x=2, y=2）步長進行移動
# 第2步，定義一個按鈕用來移動指定圖形的在畫布上的位置
b = tk.Button(root, text='move item',command=moveit).pack()
```
## 10.Menu
1. 簡單說明：
Menu：選單條，用來實現下拉和彈出式選單，點下選單後彈出的一個選項列表,使用者可以從中選擇
2. 什麼時候用：
在比如像軟體或網頁互動介面等，需要提供選單選項功能提供使用者選擇選單選項功能時用到。
3. 示例程式碼：
```gherkin=
# 第1步，在圖形介面上建立一個標籤用以顯示內容並放置
l = tk.Label(root, text=' ', bg='green')
l.pack()
# 第7步，定義一個函式功能，用來代表選單選項的功能，這裡為了操作簡單，定義的功能比較簡單
counter = 0
def do_job():
global counter
l.config(text='do '+ str(counter))
counter += 1
# 第2步，建立一個選單欄，這裡我們可以把他理解成一個容器，在視窗的上方
menubar = tk.Menu(root)
# 第3步，建立一個File選單項（預設不下拉，下拉內容包括New，Open，Save，Exit功能項）
filemenu = tk.Menu(menubar, tearoff=0)
# 將上面定義的空選單命名為File，放在選單欄中，就是裝入那個容器中
menubar.add_cascade(label='File', menu=filemenu)
# 在File中加入New、Open、Save等小選單，即我們平時看到的下拉選單，每一個小選單對應命令操作。
filemenu.add_command(label='New', command=do_job)
filemenu.add_command(label='Open', command=do_job)
filemenu.add_command(label='Save', command=do_job)
filemenu.add_separator() # 新增一條分隔線
filemenu.add_command(label='Exit', command=root.quit) # 用tkinter裡面自帶的quit()函式
# 第4步，建立一個Edit選單項（預設不下拉，下拉內容包括Cut，Copy，Paste功能項）
editmenu = tk.Menu(menubar, tearoff=0)
# 將上面定義的空選單命名為 Edit，放在選單欄中，就是裝入那個容器中
menubar.add_cascade(label='Edit', menu=editmenu)
# 同樣的在 Edit 中加入Cut、Copy、Paste等小命令功能單元，如果點選這些單元, 就會觸發do_job的功能
editmenu.add_command(label='Cut', command=do_job)
editmenu.add_command(label='Copy', command=do_job)
editmenu.add_command(label='Paste', command=do_job)
# 第5步，建立第二級選單，即選單項裡面的選單
submenu = tk.Menu(filemenu) # 和上面定義選單一樣，不過此處實在File上建立一個空的選單
filemenu.add_cascade(label='Import', menu=submenu, underline=0) # 給放入的選單submenu命名為Import
# 第6步，建立第三級選單命令，即選單項裡面的選單項裡面的選單命令（有點拗口，笑~~~）
submenu.add_command(label='Submenu_1', command=do_job) # 這裡和上面建立原理也一樣，在Import選單項中加入一個小選單命令Submenu_1
# 第8步，建立選單欄完成後，配置讓選單欄menubar顯示出來
root.config(menu=menubar)
```
## 11.Frame
1. 簡單說明：
Frame：框架，用來承載放置其他GUI元素，就是一個容器，是一個在 Windows 上分離小區域的部件, 它能將 Windows 分成不同的區,然後存放不同的其他部件. 同時一個 Frame 上也能再分成兩個 Frame, Frame 可以認為是一種容器.
2. 什麼時候用：
在比如像軟體或網頁互動介面等，有不同的介面邏輯層級和功能區域劃分時可以用到，讓互動介面邏輯更加清晰。
3. 示例程式碼：
```gherkin=
# 第1步，在圖形介面上建立一個標籤用以顯示內容並放置
tk.Label(root, text='on the root', bg='red', font=('Arial', 16)).pack() # 和前面部件分開建立和放置不同，其實可以建立和放置一步完成
# 第2步，建立一個主frame，長在主window視窗上
frame = tk.Frame(root)
frame.pack()
# 第3步，建立第二層框架frame，長在主框架frame上面
frame_l = tk.Frame(frame)# 第二層frame，左frame，長在主frame上
frame_r = tk.Frame(frame)# 第二層frame，右frame，長在主frame上
frame_l.pack(side='left')
frame_r.pack(side='right')
# 第4步，建立三組標籤，為第二層frame上面的內容，分為左區域和右區域，用不同顏色標識
tk.Label(frame_l, text='on the frame_l1', bg='green').pack()
tk.Label(frame_l, text='on the frame_l2', bg='green').pack()
tk.Label(frame_l, text='on the frame_l3', bg='green').pack()
tk.Label(frame_r, text='on the frame_r1', bg='yellow').pack()
tk.Label(frame_r, text='on the frame_r2', bg='yellow').pack()
tk.Label(frame_r, text='on the frame_r3', bg='yellow').pack()
```
## 12.messageBox
1. 簡單說明：
messageBox：訊息框，用於顯示你應用程式的訊息框。
2. 什麼時候用：
在比如像軟體或網頁互動介面等，有不同的介面邏輯層級和功能區域劃分時可以用到，讓互動介面邏輯更加清晰。
3. 示例程式碼：
```gherkin=
# 要使用messagebox先要匯入模組
import tkinter.messagebox
def hit_me():
# 提示資訊對話窗
tkinter.messagebox.showinfo(title='Hi', message='你好！')
# 提出警告對話窗
# tkinter.messagebox.showwarning(title='Hi', message='有警告！')
# 提出錯誤對話窗
# tkinter.messagebox.showerror(title='Hi', message='出錯了！')
# 詢問選擇對話窗return 'yes', 'no'
# print(tkinter.messagebox.askquestion(title='Hi', message='你好！'))
# print(tkinter.messagebox.askyesno(title='Hi', message='你好！'))
# print(tkinter.messagebox.askokcancel(title='Hi', message='你好！'))
# 第4步，在圖形介面上建立一個標籤用以顯示內容並放置
tk.Button(root, text='hit me', bg='green', font=('Arial', 14), command=hit_me).pack()
```
## 13.pack/grid/place放置方式
### 1. Grid
+ grid 是方格, 所以所有的內容會被放在這些規律的方格中。例如：
```gherkin=
for i in range(3):
for j in range(3):
tk.Label(root, text=1).grid(row=i, column=j, padx=10, pady=10, ipadx=10, ipady=10)
```
+ 以上的程式碼就是建立一個三行三列的表格，其實 grid 就是用表格的形式定位的。這裡的引數 row 為行，colum 為列，padx 就是單元格左右間距，pady 就是單元格上下間距，ipadx是單元格內部元素與單元格的左右間距，ipady是單元格內部元素與單元格的上下間距。
### 2. Pack
+ 我們常用的pack(), 他會按照上下左右的方式排列.例如：
```gherkin=
tk.Label(root, text='P', fg='red').pack(side='top') # 上
tk.Label(root, text='P', fg='red').pack(side='bottom') # 下
tk.Label(root, text='P', fg='red').pack(side='left') # 左
tk.Label(root, text='P', fg='red').pack(side='right') # 右
```
### 3. Place
+ 給精確的座標來定位，如此處給的(50, 100)，就是將這個部件放在座標為(x=50, y=100)的這個位置, 後面的引數 anchor='nw'，就是前面所講的錨定點是西北角。例如：
```gherkin=
tk.Label(root, text='Pl', font=('Arial', 20), ).place(x=50, y=100, anchor='nw')
```
:::info
:::
###### tags: `GUI` `tkinter` `python`
Sign in with Wallet
Connect another wallet