Tkinter之組件佈局和事件綁定

• 原文博客地址: Tkinter之組件佈局和事件綁定
• 前面的一些文章介紹了Tkinter模塊和大部分組建的使用
• 這裏主要介紹數據的操做和組件佈局等
• GitHub代碼示例目地址

一. 數據顯示

在tkinter中的數據展現方式有兩種表格數據和樹狀數據, 可是都用到同一個組件Treeview, 下面介紹組建的使用

1. 表格數據

• 表格數據, 顧名思義就是用表格形式展現數據
• 要使用Treeview首先要引用tkinter中的ttk模塊

from tkinter import ttk

# 此處省略window的相關代碼

# 建立表格
tree = ttk.Treeview(window)
tree.pack()

# 定義列title(接受一個元組)
tree["columns"] = ('name', 'sex', 'age', 'height', 'weight')

# 設置列寬度
tree.column('name', width=100)
tree.column('sex', width=50)
tree.column('age', width=50)
tree.column('height', width=80)
tree.column('weight', width=80)

# 設置表頭(列名)
tree.heading('name', text='姓名')
tree.heading('sex', text='性別')
tree.heading('age', text='年齡')
tree.heading('height', text='身高(CM)')
tree.heading('weight', text='體重(KG)')

# 添加數據
tree.insert('', 0, text='line1', values=('Titan', 'M', 20, 180, 80))
tree.insert('', 1, text='line2', values=('Jun', 'M', 19, 170, 65))
tree.insert('', 2, text='line3', values=('Coder', 'M', 20, 170, 70))
tree.insert('', 3, text='line4', values=('Che', 'W', 18, 165, 45))
# 上面第一個參數爲第一層級, 這裏目前用不到, 後面樹狀結構中會用到
複製代碼

效果圖以下

2. 樹狀數據

樹狀數據這裏指的是,相似文件夾的層級目錄同樣

# 建立表格
tree = ttk.Treeview(window)
tree.pack()

# 添加一級樹枝
treeA1 = tree.insert('', 0, '浙', text='浙江', values=('A1'))
treeA2 = tree.insert('', 1, '魯', text='山東', values=('A2'))
treeA3 = tree.insert('', 2, '蘇', text='江蘇', values=('A3'))

# 添加二級樹枝
treeA1_1 = tree.insert(treeA1, 0, 'H', text='杭州', values=('A1_1'))
treeA1_2 = tree.insert(treeA1, 1, 'Z', text='舟山', values=('A1_2'))
treeA1_3 = tree.insert(treeA1, 2, 'J', text='嘉興', values=('A1_3'))

treeA2_1 = tree.insert(treeA2, 0, 'N', text='濟南', values=('A2_1'))
treeA2_2 = tree.insert(treeA2, 1, 'L', text='臨沂', values=('A2_2'))
treeA2_3 = tree.insert(treeA2, 2, 'Q', text='青島', values=('A2_3'))
treeA2_4 = tree.insert(treeA2, 3, 'Y', text='煙臺', values=('A2_4'))


# 三級樹枝
treeA1_1_1 = tree.insert(treeA1_1, 0, 'G', text='江干', values=('A1_1_1'))
treeA1_1_1 = tree.insert(treeA1_1, 1, 'X', text='蕭山', values=('A1_1_2'))
複製代碼

注意事項

• insert: 參數介紹
  • 參數1: 上一層級的目錄
  • 參數2: 當前數據在當前層級的中的索引值
  • 參數3: 當前數據的標識, 全部層及數據的該標識不能相同, 不然報錯
  • 參數4: 顯示的數據
• 注: 全部數據的參數3(標識)不能相同

效果圖以下

二. 佈局方式

• 所謂佈局，就是指控制窗體容器中各個控件（組件）的位置關係。
• 在tkinter中目前存在的佈局方式有三種: 絕對佈局(place), 相對佈局(pack)和表格佈局(grid)

1. 絕對佈局

• 絕對佈局: 窗口的變化對位置沒有影響
• 這裏先介紹place佈局涉及到的相關屬性和函數

1-1. 屬性介紹

屬性名	屬性簡析	取值	取值說明
anchor	錨點, 當可用空間大於所需求的尺寸時，決定組件被放置於容器的何處	N、E、S、W、NW、NE、SW、SE、CENTER(默認值)	表示八個方向以及中心
x、y	組件左上角的x、y座標	整數，默認值0	絕對位置座標，單位像素
relx/rely	組件相對於父容器的x、y座標	0~1之間浮點數	相對位置，0.0表示左邊緣（或上邊緣），1.0表示右邊緣（或下邊緣）
width/height	組件的寬度、高度	非負整數	單位像素
relwidth、relheight	組件相對於父容器的寬度、高度	0~1之間浮點數	與relx(rely)取值類似
bordermode	若是設置爲INSIDE，組件內部的大小和位置是相對的，不包括邊框；若是是OUTSIDE，組件的外部大小是相對的，包括邊框	INSIDE(默認)、OUTSIDE	可使用常量INSIDE、OUTSIDE，也可使用字符串形式inside、outside

# 建立四個label
label1 = Label(window, text='11111', bg='red')
label2 = Label(window, text='22222', bg='yellow')
label3 = Label(window, text='33333', bg='blue')
label4 = Label(window, text='44444', bg='orange')

# 絕對佈局
label1.place(x=10, y=10, width=200)
label2.place(x=30, y=30)
label3.place(x=60, y=61)
label4.place(x=91, y=91, width=200, height=50)
複製代碼

以下圖組件位置固定

1-2. 相關函數

place類提供了下列函數（使用組件實例對象調用）

• place_slaves(): 以列表方式返回本組件的全部子組件對象
• place_configure(option=value): 給place佈局管理器設置屬性，使用屬性option=value方式設置
• propagate(boolean): 設置爲True表示父組件的幾何大小由子組件決定(默認值)，反之則無關
• place_info(): 返回place提供的選項所對應得值
• grid_forget(): Unpack組件，將組件隱藏而且忽略原有設置，對象依舊存在，能夠用pack(option, …)，將其顯示
• location(x, y): x/y爲以像素爲單位的點，函數返回此點是否在單元格中，在哪一個單元格中。返回單元格行列座標，(-1, -1)表示不在其中
• size(): 返回組件所包含的單元格，揭示組件大小

2. 相對佈局

2-1. 屬性介紹

• 相對佈局: 組件位置或大小的變化會隨着窗口的變化而變化
• 這裏先介紹pack佈局涉及到的相關屬性和函數

屬性名	屬性簡析	取值	取值說明
fill	設置組件是否向水平或垂直方向填充	X、Y、BOTH和NONE	fill=X(水平方向填充),BOTH(水平和垂直),NONE不填充
expand	設置組件是否展開	YES、NO（一、0）	expand=YES
side	設置組件的對齊方式	LEFT、TOP、RIGHT、BOTTOM	值爲左、上、右、下
ipadx/ipady	設置x方向（或者y方向）內部間隙（子組件之間的間隔）	可設置數值，默認是0	非負整數，單位爲像素
padx/pady	設置x方向（或者y方向）外部間隙（與之並列的組件之間的間隔）	可設置數值，默認是0	非負整數，單位爲像素
anchor	錨選項，當可用空間大於所需求的尺寸時，決定組件被放置於容器的何處	N、E、S、W、NW、NE、SW、SE、CENTER（默認值爲CENTER）	表示八個方向以及中心

須要注意

expand: 設置組件是否展開，當值爲YES時，side選項無效。組件顯示在父容器中心位置；若fill選項爲BOTH,則填充父組件的剩餘空間。默認爲不展開

# 建立四個label
label1 = Label(window, text='11111', bg='red')
label2 = Label(window, text='22222', bg='yellow')
label3 = Label(window, text='33333', bg='blue')
label4 = Label(window, text='44444', bg='orange')


# 佈局
label1.pack(side=LEFT, fill=Y)
label2.pack(side=RIGHT, fill=Y)
label3.pack(side=TOP, fill=X)
label4.pack(side=BOTTOM, fill=X)
複製代碼

效果如圖

2-2. 函數介紹

pack類提供了下列函數（使用組件實例對象調用）

• pack_slaves(): 以列表方式返回本組件的全部子組件對象
• pack_configure(option=value): 給pack佈局管理器設置屬性，使用屬性option=value方式設置
• propagate(boolean): 設置爲 True 表示父組件的幾何大小由子組件決定（默認值），反之則無關。
• ack_info(): 返回pack提供的選項所對應得值。
• pack_forget(): Unpack組件，將組件隱藏而且忽略原有設置，對象依舊存在，能夠用pack(option, …)，將其顯示。
• location(x, y): x, y爲以像素爲單位的點，函數返回此點是否在單元格中，在哪一個單元格中。返回單元格行列座標，(-1, -1)表示不在其中
• size(): 返回組件所包含的單元格，揭示組件大小

3. 表格佈局

• grid佈局又被稱做網格佈局，是最被推薦使用的佈局。
• 程序大多數都是矩形的界面，咱們能夠很容易把它劃分爲一個幾行幾列的網格，而後根據行號和列號，將組件放置於網格之中
• 使用grid佈局時，須要在裏面指定兩個參數，分別用row 表示行，column表示列
• 須要注意的是row和column的序號都從0開始

3-1. 屬性介紹

屬性名	屬性簡析	取值	取值說明
row/column	row爲行號，column爲列號，設置將組件放置於第幾行第幾列	取值爲行、列的序號，不是行數與列數	row和column 的序號都從0 開始
sticky	設置組件在網格中的對齊方式	N、E、S、W、NW、NE、SW、SE、CENTER	相似於pack佈局中的錨選項
rowspan	組件所跨越的行數	跨越的行數	取值爲跨越佔用的行數，而不是序號
columnspan	組件所跨越的列數	跨越的列數	取值爲跨越佔用的列數，而不是序號
ipadx/ipady	設置x方向（或者y方向）內部間隙（子組件之間的間隔）	可設置數值，默認是0	非負整數，單位爲像素
padx/pady	設置x方向（或者y方向）外部間隙（與之並列的組件之間的間隔）	可設置數值，默認是0	非負整數，單位爲像素

# 建立四個label
label1 = Label(window, text='11111', bg='red')
label2 = Label(window, text='22222', bg='yellow')
label3 = Label(window, text='33333', bg='blue')
label4 = Label(window, text='44444', bg='orange')

# 佈局
label1.grid(row=0, column=0)
label2.grid(row=0, column=1)
label3.grid(row=1, column=0)
label4.grid(row=1, column=1)
複製代碼

效果如圖

3-2. 函數介紹

grid類提供了下列函數（使用組件實例對象調用）：

函數名	描述
grid_slaves()	以列表方式返回本組件的全部子組件對象。
grid_configure(option=value)	給grid佈局管理器設置屬性
grid_propagate(boolean)	設置爲True表示父組件的幾何大小由子組件決定(默認值)，反之則無關。
grid_info()	返回grid提供的選項所對應得值。
grid_forget()	將組件隱藏而且忽略原有設置，對象依舊存在
grid_location(x, y)	x/y爲以像素爲單位的點，函數返回此點是否在單元格中
size()	返回組件所包含的單元格，揭示組件大小

三. 鼠標和鍵盤事件

• 一個Tkinter應用生命週期中的大部分時間都處在一個消息循環中
• 它等待事件的發生: 事件多是按鍵按下, 鼠標點擊, 鼠標移動等.
• Tkinter提供了用以處理相關事件的機制, 處理函數能夠被綁定給各個控件的各類事件
• 若是相關事件發生, handler函數會被觸發, 事件對象event會傳遞給handler函數

button.bind(event, handler) 
複製代碼

1. 鼠標點擊事件

def buttonAction(event):
    print(event.x, event.y)

button = Button(window, text='這是一個按鈕')
button.bind('<Button-4>', buttonAction)
button.pack()
複製代碼

其中event的事件類型和描述以下

Event	Description
<Button-1>	鼠標左鍵
<Button-3>	鼠標右鍵
<Button-2>	鼠標中鍵
<Button-4>	鼠標向上滾動
<Button-5>	鼠標向下滾動
<Double-Button-1>	鼠標左鍵雙擊
<Double-Button-3>	鼠標右鍵雙擊
<Double-Button-2>	鼠標中鍵雙擊
<Triple-Button-1>	鼠標左鍵三擊
<Triple-Button-3>	鼠標右鍵三擊
<Triple-Button-2>	鼠標中鍵三擊

2. 鼠標在某個按鍵被按下後的移動事件

label = Label(window, text='https://www.titanjun.top', bg='orange')
label.place(x=100, y=50, height=30)

def labelAction(event):
    print(event.x, event.y)
label.bind('<B1-Motion>', labelAction)
複製代碼

其中event的事件類型和描述以下

Event	Description
<B1-Motion>	左鍵移動
<B3-Motion>	右鍵移動
<B2-Motion>	中鍵移動

3. 按鈕點擊釋放事件

label = Label(window, text='https://www.titanjun.top', bg='orange')
label.place(x=100, y=50, height=30)

def labelAction(event):
    print(event.x, event.y)
label.bind('<ButtonRelease-1>', labelAction)
複製代碼

其中event的事件類型和描述以下

Event	Description
<ButtonRelease-1>	釋放鼠標左鍵
<ButtonRelease-3>	釋放鼠標右鍵
<ButtonRelease-2>	釋放鼠標中鍵

須要注意的是

• 以上鼠標操做中, 蘋果鼠標沒有中鍵這一說, 因此在蘋果鼠標操做中
• 正常鼠標的中鍵操做(例如<Button-2>等-2操做), 響應蘋果鼠標的右鍵操做
• 正常鼠標的右鍵操做(例如<Button-3>等-3操做), 在蘋果鼠標中無響應

4. 鼠標進入/離開控件事件

# 按鈕點擊釋放事件
label3 = Label(window, text='加油: https://www.titanjun.top', bg='yellow')
label3.place(x=100, y=150, height=30)

def labelAction(event):
    print(event.x, event.y)
label3.bind('<Leave>', labelAction)
複製代碼

其中event的事件類型和描述以下

Event	Description
<Enter>	鼠標光標進入控件時觸發
<Leave>	鼠標光標離開控件時觸發

5. 鍵盤響應事件

# 響應全部的按鍵
label = Label(window, text='https://www.titanjun.top', bg='orange')
# 設置焦點
label.focus_set()
label.place(x=100, y=50, height=30)

def labelAction(event):
    print(event.char, event.keycode)
label.bind('<Key>', labelAction)
複製代碼

其餘按鍵操做

Event	Description
<Key>	響應全部的按鍵(按下)
<KeyRelease>	響應全部的按鍵(鬆開)
<FocusIn>	控件或控件的子空間得到鍵盤焦點.
<FocusOut>	控件丟失鍵盤焦點 (焦點移動到另外一個控件).

6. 指定按鍵操做

Event	Description
<Return>/<Enter>	只有回車鍵響應
<Escape>	esc鍵
<space>	空格鍵
<Tab>	Tab鍵
<Up>/<Down>/<Left>/<Right>	上下左右鍵
<Shitf_L>/<Shift_R>	左右Shift鍵(相似有左右兩個鍵的, 添加_L/_R區分)
<BackSpace>	退格
<a>/<b>	指定的小寫字母鍵
<A>/<Z>	指定的大寫字母鍵
<Control-Alt-a>	組合鍵(可識別任意組合鍵)

須要注意的是: 識別組合鍵時, 通常是按下組合鍵的最後一個鍵纔會觸發操做

7. event事件的相應參數

時間屬性	描述
char	從鍵盤輸入的和按鍵事件的相關字符
keycode	從按鍵輸入的和按鍵事件的鍵代碼(ASCII碼)
keysym	從按鍵輸入的和按鍵事件的鍵符號(即字符)
num	按鍵數字(1, 2, 3)代表按下的是哪一個鼠標鍵
widget	觸發這個事件的小構件對象
x和y	當前鼠標在小構件中以像素爲單位的位置
x_root和y_root	當前鼠標相對於屏幕左上角的以像素爲單位的位置