快捷導(dǎo)航

Python GUI之tkinter布局管理教程

更新時(shí)間：2022年06月20日 15:00:08 作者：編程之路從0到1

這篇文章主要介紹了Python GUI之tkinter布局管理教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

from tkinter import *
root = Tk()
 
#創(chuàng)建三個(gè) Label 分別添加到root窗體中 
#Label是一種用來(lái)顯示文字或者圖片的組件
Label(root,text = 'pack1',bg = 'red').pack() 
Label(root, text = 'pack2', bg = 'blue').pack() 
Label(root, text = 'pack3', bg = 'green').pack() 
 
root.mainloop()

如圖：

pack常用屬性

屬性名	屬性簡(jiǎn)析	取值	取值說(shuō)明
fill	設(shè)置組件是否向水平或垂直方向填充	X、Y、BOTH 和NONE	fill = X（水平方向填充）fill = Y（垂直方向填充）fill = BOTH（水平和垂直）NONE 不填充
expand	設(shè)置組件是否展開(kāi)，當(dāng)值為YES時(shí)，side選項(xiàng)無(wú)效。組件顯示在父容器中心位置；若fill選項(xiàng)為BOTH,則填充父組件的剩余空間。默認(rèn)為不展開(kāi)	YES 、NO（1、0）	expand=YES expand=NO
side	設(shè)置組件的對(duì)齊方式	LEFT、TOP、RIGHT、BOTTOM	值為左、上、右、下
ipadx、ipady	設(shè)置x方向（或者y方向）內(nèi)部間隙（子組件之間的間隔）	可設(shè)置數(shù)值，默認(rèn)是0	非負(fù)整數(shù)，單位為像素
padx、pady	設(shè)置x方向（或者y方向）外部間隙（與之并列的組件之間的間隔）	可設(shè)置數(shù)值，默認(rèn)是0	非負(fù)整數(shù)，單位為像素
anchor	錨選項(xiàng)，當(dāng)可用空間大于所需求的尺寸時(shí)，決定組件被放置于容器的何處	N、E、S、W、NW、NE、SW、SE、CENTER（默認(rèn)值為CENTER）	表示八個(gè)方向以及中心

注意：上表中取值都是常量，YES等價(jià)于"yes"，亦可以直接傳入字符串值。另外當(dāng)界面復(fù)雜度增加時(shí)，要實(shí)現(xiàn)某種布局效果，需要分層來(lái)實(shí)現(xiàn)。

from tkinter import *    #注意模塊導(dǎo)入方式，否則代碼會(huì)有差別
 
class App:
    def __init__(self, master):
        #使用Frame增加一層容器
        fm1 = Frame(master)
        #Button是一種按鈕組件，與Label類似，只是多出了響應(yīng)點(diǎn)擊的功能
        Button(fm1, text='Top').pack(side=TOP, anchor=W, fill=X, expand=YES)
        Button(fm1, text='Center').pack(side=TOP, anchor=W, fill=X, expand=YES)
        Button(fm1, text='Bottom').pack(side=TOP, anchor=W, fill=X, expand=YES)
        fm1.pack(side=LEFT, fill=BOTH, expand=YES)
 
        fm2 = Frame(master)
        Button(fm2, text='Left').pack(side=LEFT)
        Button(fm2, text='This is the Center button').pack(side=LEFT)
        Button(fm2, text='Right').pack(side=LEFT)        
        fm2.pack(side=LEFT, padx=10)
        
root = Tk()
root.title("Pack - Example")
display = App(root)
root.mainloop()

如上，創(chuàng)建一個(gè)Frame容器fm1，將三個(gè)垂直排列的Button組件使用pack布局放入fm1容器中，然后創(chuàng)建fm2容器，同樣將三個(gè)水平排列的Button組件放入，最后將兩個(gè)Frame容器當(dāng)做組件，使用pack布局放入根窗體容器中。

如此分層布局，實(shí)現(xiàn)了相對(duì)復(fù)雜一些的界面需求。

pack類提供了下列函數(shù)（使用組件實(shí)例對(duì)象調(diào)用）

函數(shù)名	描述
pack_slaves()	以列表方式返回本組件的所有子組件對(duì)象。
pack_configure(option=value)	給pack布局管理器設(shè)置屬性，使用屬性（option）= 取值（value）方式設(shè)置
propagate(boolean)	設(shè)置為True表示父組件的幾何大小由子組件決定（默認(rèn)值），反之則無(wú)關(guān)。
pack_info()	返回pack提供的選項(xiàng)所對(duì)應(yīng)得值。
pack_forget()	Unpack組件，將組件隱藏并且忽略原有設(shè)置，對(duì)象依舊存在，可以用pack(option, …)，將其顯示。
location(x, y)	x, y為以像素為單位的點(diǎn)，函數(shù)返回此點(diǎn)是否在單元格中，在哪個(gè)單元格中。返回單元格行列坐標(biāo)，(-1, -1)表示不在其中
size()	返回組件所包含的單元格，揭示組件大小。

grid布局

grid布局又被稱作網(wǎng)格布局，是最被推薦使用的布局。程序大多數(shù)都是矩形的界面，我們可以很容易把它劃分為一個(gè)幾行幾列的網(wǎng)格，然后根據(jù)行號(hào)和列號(hào)，將組件放置于網(wǎng)格之中。使用grid 布局時(shí)，需要在里面指定兩個(gè)參數(shù)，分別用row 表示行，column 表示列。需要注意的是 row 和 column 的序號(hào)都從0 開(kāi)始。

如下圖，假設(shè)將界面分成網(wǎng)格。

grid屬性設(shè)置

屬性名	屬性簡(jiǎn)析	取值	取值說(shuō)明
row、column	row為行號(hào)，column為列號(hào)，設(shè)置將組件放置于第幾行第幾列	取值為行、列的序號(hào)，不是行數(shù)與列數(shù)	row 和 column 的序號(hào)從0開(kāi)始，但是，column的默認(rèn)值是0，row的默認(rèn)值是下一個(gè)編號(hào)較大的未占用行號(hào)
sticky	設(shè)置組件在網(wǎng)格中的對(duì)齊方式（前提是有額外的空間）	N、E、S、W、NW、NE、SW、SE	類似于pack布局中的錨選項(xiàng)
rowspan	組件所跨越的行數(shù)	默認(rèn)值為1	取值為跨越占用的行數(shù)，而不是序號(hào)
columnspan	組件所跨越的列數(shù)	默認(rèn)值為1	取值為跨越占用的列數(shù)，而不是序號(hào)
ipadx、ipady、padx、pady	組件的內(nèi)部、外部間隔距離，與pack的該屬性用法相同	同pack	同pack

grid類提供了下列函數(shù)（使用組件實(shí)例對(duì)象調(diào)用）

函數(shù)名	描述
grid_slaves()	以列表方式返回本組件的所有子組件對(duì)象。
grid_configure(option=value)	給pack布局管理器設(shè)置屬性，使用屬性（option）= 取值（value）方式設(shè)置
grid_propagate(boolean)	設(shè)置為True表示父組件的幾何大小由子組件決定（默認(rèn)值），反之則無(wú)關(guān)。
grid_info()	返回pack提供的選項(xiàng)所對(duì)應(yīng)得值。
grid_forget()	Unpack組件，將組件隱藏并且忽略原有設(shè)置，對(duì)象依舊存在，可以用pack(option, …)，將其顯示。
grid_location(x, y)	x, y為以像素為單位的點(diǎn)，函數(shù)返回此點(diǎn)是否在單元格中，在哪個(gè)單元格中。返回單元格行列坐標(biāo)，(-1, -1)表示不在其中
size()	返回組件所包含的單元格，揭示組件大小。

place布局。

最簡(jiǎn)單最靈活的一種布局，使用組件坐標(biāo)來(lái)放置組件的位置。但是不太推薦使用，在不同分辨率下，界面往往有較大差異。

place屬性設(shè)置

屬性名	屬性簡(jiǎn)析	取值	取值說(shuō)明
anchor	錨選項(xiàng)，同pack布局	默認(rèn)值為 NW	同pack布局
x、y	組件左上角的x、y坐標(biāo)	整數(shù)，默認(rèn)值0	絕對(duì)位置坐標(biāo)，單位像素
relx、rely	組件相對(duì)于父容器的x、y坐標(biāo)	0~1之間浮點(diǎn)數(shù)	相對(duì)位置，0.0表示左邊緣（或上邊緣），1.0表示右邊緣（或下邊緣）
width、height	組件的寬度、高度	非負(fù)整數(shù)	單位像素
relwidth、relheight	組件相對(duì)于父容器的寬度、高度	0~1之間浮點(diǎn)數(shù)	與relx（rely）取值相似

bordermode 如果設(shè)置為INSIDE，組件內(nèi)部的大小和位置是相對(duì)的，不包括邊框；如果是OUTSIDE，組件的外部大小是相對(duì)的，包括邊框 INSIDE、OUTSIDE(默認(rèn)值INSIDE) 可以使用常量INSIDE、OUTSIDE，也可以使用字符串形式"inside"、"outside"

place類提供了下列函數(shù)（使用組件實(shí)例對(duì)象調(diào)用）

函數(shù)名	描述
place_slaves()	以列表方式返回本組件的所有子組件對(duì)象。
place_configure(option=value)	給pack布局管理器設(shè)置屬性，使用屬性（option）= 取值（value）方式設(shè)置
propagate(boolean)	設(shè)置為True表示父組件的幾何大小由子組件決定（默認(rèn)值），反之則無(wú)關(guān)。
place_info()	返回pack提供的選項(xiàng)所對(duì)應(yīng)得值。
grid_forget()	Unpack組件，將組件隱藏并且忽略原有設(shè)置，對(duì)象依舊存在，可以用pack(option, …)，將其顯示。
location(x, y)	x, y為以像素為單位的點(diǎn)，函數(shù)返回此點(diǎn)是否在單元格中，在哪個(gè)單元格中。返回單元格行列坐標(biāo)，(-1, -1)表示不在其中
size()	返回組件所包含的單元格，揭示組件大小。