[譯][Tkinter 教程12] 佈局管理 (Pack Place Grid)

已獲原做者受權. 原系列地址: Python Tkinter

簡介:

本文講述如何使用 tkinter 的佈局管理 (被稱做 layout managers 或 geometry managers). tkinter 有三種佈局管理方式:

• pack
• grid
• place

注意這三種佈局管理在同一個 master window 裏必定不能夠混用! 佈局管理有如下功能:

• 將控件放置在屏幕上,包括控件的位置及控件的大小
• 將控件註冊到本地窗口系統中
• 管理控件在屏幕上的顯示

雖然控件本身也能夠指定大小和對齊方式等信息, 但最終的控件大小及位置仍是由佈局管理決定的.

Pack 佈局管理

pack 是三種佈局管理中最經常使用的. 另外兩種佈局須要精確指定控件具體的顯示位置, 而 pack 佈局能夠指定相對位置, 精確的位置會由 pack 系統自動完成. 這也使得 pack 佈局沒有另外兩種佈局方式靈活. 因此 pack 是簡單應用的首選佈局, 好比只是想要將控件水平或垂直的逐個放在一塊兒:

from Tkinter import *

root = Tk()
Label(root, text="Red Sun", bg="red", fg="white").pack()
Label(root, text="Green Grass", bg="green", fg="black").pack()
Label(root, text="Blue Sky", bg="blue", fg="white").pack()
mainloop()

下面將逐一講解 pack 佈局的各個屬性.

fill 控件填充方式

在上面那個例子裏, 咱們簡單的將三個 Label 控件 pack 到其父窗口上, 沒有使用任何屬性. 因而 pack 使用了默認方式進行佈局: 從上到下順次排放, 並水平居中. 同時咱們也發現, pack 默認會將 Label 控件的寬度設置爲其中的文字的寬度. 若是咱們想讓它們和其父窗口同樣寬, 可使用 fill=X 屬性:

from Tkinter import *

root = Tk()
w = Label(root, text="Red Sun", bg="red", fg="white")
w.pack(fill=X)
w = Label(root, text="Green Grass", bg="green", fg="black")
w.pack(fill=X)
w = Label(root, text="Blue Sky", bg="blue", fg="white")
w.pack(fill=X)
mainloop()

padding 控件邊距

Pack 能夠在四個方面控制控件邊距: 內邊距, 外邊距, 水平邊距, 垂直邊距:

padx - 設置水平方向的外邊距

from Tkinter import *

root = Tk()
w = Label(root, text="Red Sun", bg="red", fg="white")
w.pack(fill=X,padx=10)
w = Label(root, text="Green Grass", bg="green", fg="black")
w.pack(fill=X,padx=10)
w = Label(root, text="Blue Sky", bg="blue", fg="white")
w.pack(fill=X,padx=10)
mainloop()

pady - 設置豎直方向的外邊距

from Tkinter import *

root = Tk()
w = Label(root, text="Red Sun", bg="red", fg="white")
w.pack(fill=X,pady=10)
w = Label(root, text="Green Grass", bg="green", fg="black")
w.pack(fill=X,pady=10)
w = Label(root, text="Blue Sky", bg="blue", fg="white")
w.pack(fill=X,pady=10)
mainloop()

ipadx - 設置水平方向的內邊距

from Tkinter import *

root = Tk()
w = Label(root, text="Red Sun", bg="red", fg="white")
w.pack()
w = Label(root, text="Green Grass", bg="green", fg="black")
w.pack(ipadx=10)
w = Label(root, text="Blue Sky", bg="blue", fg="white")
w.pack()
mainloop()

ipady - 設置豎直方向的內邊距

from Tkinter import *

root = Tk()
w = Label(root, text="Red Sun", bg="red", fg="white")
w.pack()
w = Label(root, text="Green Grass", bg="green", fg="black")
w.pack(ipadx=10)
w = Label(root, text="Blue Sky", bg="blue", fg="white")
w.pack(ipady=10)
mainloop()

上述四個屬性的默認值都是 0.

side 順次放置控件

咱們把上面那幾個 Label 從左到右放在一排:

from Tkinter import *

root = Tk()
w = Label(root, text="red", bg="red", fg="white")
w.pack(padx=5, pady=10, side=LEFT)
w = Label(root, text="green", bg="green", fg="black")
w.pack(padx=5, pady=20, side=LEFT)
w = Label(root, text="blue", bg="blue", fg="white")
w.pack(padx=5, pady=20, side=LEFT)
mainloop()

若是把上述 side 屬性的值都改成 RIGHT, 那麼上面 Label 控件的排列順序就反過來了:

Place 佈局管理

Place 佈局管理能夠顯式的指定控件的絕對位置或相對於其餘控件的位置. 要使用 Place 佈局, 調用相應控件的 place() 方法就能夠了. 全部 tkinter 的標準控件均可以調用 place() 方法.

下面是一個使用 Place 佈局的例子: 爲 Label 控件設置隨機的背景色, 而後計算各個 Label 的背景色的亮度(灰度值), 若是其亮度小於 120, 則將其前景色(文字顏色, fg 屬性)設置爲白色, 不然設爲黑色. 這樣作是爲了不使背景色和前景色過於接近而致使文字不易閱讀.

import Tkinter as tk
import random

root = tk.Tk()
# width x height + x_offset + y_offset:
root.geometry("170x200+30+30") 

languages = ['Python','Perl','C++','Java','Tcl/Tk']
labels = range(5)
for i in range(5):
   ct = [random.randrange(256) for x in range(3)]
   brightness = int(round(0.299*ct[0] + 0.587*ct[1] + 0.114*ct[2]))
   ct_hex = "%02x%02x%02x" % tuple(ct)
   bg_colour = '#' + "".join(ct_hex)
   l = tk.Label(root, 
                text=languages[i], 
                fg='White' if brightness < 120 else 'Black', 
                bg=bg_colour)
   l.place(x = 20, y = 30 + i*30, width=120, height=25)

root.mainloop()

Grid 佈局管理

Pack 做爲首選的佈局管理方式, 其運做方式並非特別易於理解. 已經由 Pack 佈局完成的設計也很難作出改變. Grid 佈局在1996年做爲另外一種可供選擇的佈局方式被引入. Grid 佈局方式易學易用, 但彷佛你們仍是習慣用 Pack.

Grid 在不少場景下是最好用的佈局方式. 相比而言, Pack 佈局在控制細節方面有些力不從心. Place 佈局雖然能夠徹底控制控件位置, 但這也致使使用 Place 會比其餘兩種佈局方式更加複雜.

Grid 把控件位置做爲一個二維表結構來維護, 即按照行列的方式排列控件: 控件位置由其所在的行號和列號決定. 行號相同而列號不一樣的幾個控件會被彼此上下排列; 列號相同而行號不一樣的幾個控件會被彼此左右排列.

使用 Grid 佈局的過程就是爲各個控件指定行號和列號的過程. 不須要爲每一個格子指定大小, Grid 佈局會自動設置一個合適的大小.

下面仍是舉個栗子吧:

from Tkinter import *

colours = ['red','green','orange','white','yellow','blue']

r = 0
for c in colours:
    Label(text=c, relief=RIDGE,width=15).grid(row=r,column=0)
    Entry(bg=c, relief=SUNKEN,width=10).grid(row=r,column=1)
    r = r + 1

mainloop()

---

全系列:
[譯][Tkinter 教程01] 入門: Label 控件
[譯][Tkinter 教程02] Message 控件
[譯][Tkinter 教程03] Button 控件
[譯][Tkinter 教程04] Variable 類
[譯][Tinkter 教程05] Radiobutton 控件
[譯][Tkinter 教程06] Checkbox 控件
[譯][Tkinter 教程07] Entry 控件
[譯][Tkinter 教程08] Canvas 圖形繪製
[譯][Tkinter 教程09] Scale 控件
[譯][Tkinter 教程10] Text 控件
[譯][Tkinter 教程11] 對話框和消息框
[譯][Tkinter 教程12] 佈局管理 (Pack Place Grid)
[譯][Tkinter 教程13] Mastermind 遊戲
[譯][Tkinter 教程14] menu 菜單
[譯][Tkinter 教程15] event 事件綁定

譯者水平有限, 若有疏漏, 歡迎指正.
已得到原做者受權. 原文地址:
Layout Management