# Tcl/Tk 中的布局管理 > 原文： [http://zetcode.com/gui/tcltktutorial/layout/](http://zetcode.com/gui/tcltktutorial/layout/) 在 Tcl/Tk 編程教程的這一部分中，我們將介紹布局管理器。 在設計應用的 GUI 時，我們決定要使用哪些小部件以及如何在應用中組織這些小部件。 為了組織小部件，我們使用專門的不可見對象，稱為布局管理器。 有兩種小部件：容器及其子級。 容器將子項分組為合適的布局。 Tk 具有三個內置布局管理器：`pack`，`grid`和`place`管理器。 包幾何形狀管理器在垂直和水平框中組織小部件。 網格幾何管理器將小部件放置在二維網格中。 最后，`place`幾何管理器使用絕對定位將小部件放置在其容器上。 ## 絕對定位 在大多數情況下，程序員應使用布局管理器。 在某些情況下，我們可以使用絕對定位。 在絕對定位中，程序員以像素為單位指定每個小部件的位置和大小。 如果我們調整窗口大小，則小部件的大小和位置不會改變。 在各種平臺上，應用看起來都不同，在 Linux 上看起來不錯，在 Mac OS 上看起來不太正常。 在我們的應用中更改字體可能會破壞布局。 如果我們將應用翻譯成另一種語言，則必須重做您的布局。 ```tcl #!/usr/bin/wish # ZetCode Tcl/Tk tutorial # # In this script, we lay out images # using absolute positioning. # # author: Jan Bodnar # last modified: March 2011 # website: www.zetcode.com package require Img frame .fr -background "#333" pack .fr -fill both -expand 1 image create photo img1 -file "bardejov.jpg" label .fr.lbl1 -image img1 place .fr.lbl1 -x 20 -y 20 image create photo img2 -file "rotunda.jpg" label .fr.lbl2 -image img2 place .fr.lbl2 -x 40 -y 160 image create photo img3 -file "mincol.jpg" label .fr.lbl3 -image img3 place .fr.lbl3 -x 170 -y 50 wm title . "absolute" wm geometry . 300x280+300+300 ``` 在此示例中，我們使用絕對定位放置了三個圖像。 我們將使用位置幾何圖形管理器。 ```tcl package require Img ``` 我們使用`Img`包來顯示 JPG 圖像。 在 Ubuntu Linux 上，我們必須安裝`libtk-img`包。 ```tcl package require Img ``` 要顯示 JPG 圖像，我們使用`Img`包。 ```tcl frame .fr -background "#333" ``` 我們的框架將具有深灰色背景。 ```tcl image create photo img1 -file "bardejov.jpg" ``` 我們從當前工作目錄中的圖像創建照片圖像對象。 ```tcl label .fr.lbl1 -image img1 ``` 我們用圖像創建一個`label`。 標簽可以包含文本或圖像。 ```tcl place .fr.lbl1 -x 20 -y 20 ``` 標簽放置在框架上的`x = 20`，`y = 20`坐標處。 絕對定位通過`place`命令完成。  圖：絕對定位 ## 按鈕示例 在下面的示例中，我們將在窗口的右下角放置兩個按鈕。 我們將使用`pack`管理器。 ```tcl #!/usr/bin/wish # ZetCode Tcl/Tk tutorial # # In this script, we use pack manager # to position two buttons in the # bottom right corner of the window. # # author: Jan Bodnar # last modified: March 2011 # website: www.zetcode.com frame .fr pack .fr -fill both -expand 1 frame .fr.pnl -relief raised -borderwidth 1 pack .fr.pnl -fill both -expand 1 ttk::button .fr.cb -text "Close" pack .fr.cb -padx 5 -pady 5 -side right ttk::button .fr.ok -text "OK" pack .fr.ok -side right wm title . "buttons" wm geometry . 300x200+300+300 ``` 我們將有兩個框架。 有一個基礎框架和一個附加框架，該框架將在兩個方向上擴展并將兩個按鈕按到基礎框架的底部。 這些按鈕放置在水平框中，并位于此框的右側。 ```tcl frame .fr.pnl -relief raised -borderwidth 1 pack .fr.pnl -fill both -expand 1 ``` 我們創建另一個`frame`小部件。 該小部件占用了大部分區域。 我們更改框架的邊框，以使框架可見。 默認情況下，它是平坦的。 `pack`管理器在兩個方向上擴展框架。 水平和垂直。 ```tcl ttk::button .fr.cb -text "Close" pack .fr.cb -padx 5 -pady 5 -side right ``` 創建一個關閉按鈕。 將其放入水平盒中。 `-side`選項將創建一個水平框布局，其中按鈕位于框的右側。 `-padx`和`-pady`選項將在小部件之間放置一些空間。 `-padx`在按鈕小部件之間以及關閉按鈕和根窗口的右邊框之間放置一些空間。 `-pady`在按鈕小部件與框架和根窗口的邊框之間放置一些空間。 ```tcl pack .fr.ok -side right ``` `ok`按鈕位于關閉按鈕旁邊。 它們之間有 5px 的間距。  圖：按鈕示例 ## 計算器 我們將使用 Tk 網格幾何管理器來創建計算器的骨架。 ```tcl #!/usr/bin/wish # ZetCode Tcl/Tk tutorial # # In this script, we use the grid manager # to create a skeleton of a calculator. # # author: Jan Bodnar # last modified: March 2011 # website: www.zetcode.com frame .fr -padx 5 -pady 5 pack .fr -fill both -expand 1 ttk::style configure TButton -width 8 -height 8 -font "serif 10" entry .fr.ent grid .fr.ent -row 0 -columnspan 4 -sticky we ttk::button .fr.cls -text "Cls" grid .fr.cls -row 1 -column 0 ttk::button .fr.bck -text "Back" grid .fr.bck -row 1 -column 1 ttk::button .fr.lbl grid .fr.lbl -row 1 -column 2 ttk::button .fr.clo -text "Close" grid .fr.clo -row 1 -column 3 ttk::button .fr.sev -text "7" grid .fr.sev -row 2 -column 0 ttk::button .fr.eig -text "8" grid .fr.eig -row 2 -column 1 ttk::button .fr.nin -text "9" grid .fr.nin -row 2 -column 2 ttk::button .fr.div -text "/" grid .fr.div -row 2 -column 3 ttk::button .fr.fou -text "4" grid .fr.fou -row 3 -column 0 ttk::button .fr.fiv -text "5" grid .fr.fiv -row 3 -column 1 ttk::button .fr.six -text "6" grid .fr.six -row 3 -column 2 ttk::button .fr.mul -text "*" grid .fr.mul -row 3 -column 3 ttk::button .fr.one -text "1" grid .fr.one -row 4 -column 0 ttk::button .fr.two -text "2" grid .fr.two -row 4 -column 1 ttk::button .fr.thr -text "3" grid .fr.thr -row 4 -column 2 ttk::button .fr.mns -text "-" grid .fr.mns -row 4 -column 3 ttk::button .fr.zer -text "0" grid .fr.zer -row 5 -column 0 ttk::button .fr.dot -text "." grid .fr.dot -row 5 -column 1 ttk::button .fr.equ -text "=" grid .fr.equ -row 5 -column 2 ttk::button .fr.pls -text "+" grid .fr.pls -row 5 -column 3 grid columnconfigure .fr 0 -pad 3 grid columnconfigure .fr 1 -pad 3 grid columnconfigure .fr 2 -pad 3 grid columnconfigure .fr 3 -pad 3 grid rowconfigure .fr 0 -pad 3 grid rowconfigure .fr 1 -pad 3 grid rowconfigure .fr 2 -pad 3 grid rowconfigure .fr 3 -pad 3 grid rowconfigure .fr 4 -pad 3 wm title . "calculator" wm geometry . +300+300 ``` 在此示例中，我們使用`grid`管理器來組織框架容器小部件中的按鈕。 ```tcl ttk::style configure TButton -width 8 -height 8 -font "serif 10" ``` 我們將主題`button`小部件配置為具有特定字體并具有一些內部填充。 ```tcl entry .fr.ent grid .fr.ent -row 0 -columnspan 4 -sticky we ``` `entry`小部件是顯示數字的地方。 小部件位于第一行，它將覆蓋所有四列。 小部件可能不會占用網格中單元所分配的所有空間。 `-sticky`選項將沿給定方向擴展小部件。 在我們的案例中，我們確保條目小部件從左向右展開。 ```tcl ttk::button .fr.cls -text "Cls" ``` `cls`按鈕位于第二行和第一列。 請注意，行和列從零開始。 `ttk::button`是一個主題按鈕。 ```tcl grid columnconfigure .fr 0 -pad 3 ... grid rowconfigure .fr 0 -pad 3 ``` 我們使用`columnconfigure`和`rowconfigure`命令在網格列和行中定義一些空間。 這樣，我們可以實現按鈕之間有一定的間隔。  圖：計算器 ## Windows 示例 以下示例使用網格幾何管理器創建 Windows 對話框。 該對話框來自 JDeveloper 應用。 ```tcl #!/usr/bin/wish # ZetCode Tcl/Tk tutorial # # In this script, we use the grid # manager to create a more complicated # layout. # # author: Jan Bodnar # last modified: March 2011 # website: www.zetcode.com frame .fr -padx 5 -pady 5 pack .fr -fill both -expand 1 label .fr.lbl -text Windows grid .fr.lbl -sticky w -pady 4 -padx 5 text .fr.area grid .fr.area -row 1 -column 0 -columnspan 2 \ -rowspan 4 -padx 5 -sticky ewsn ttk::button .fr.act -text Activate grid .fr.act -row 1 -column 3 ttk::button .fr.cls -text Close grid .fr.cls -row 2 -column 3 -pady 4 ttk::button .fr.hlp -text Help grid .fr.hlp -row 5 -column 0 -padx 5 ttk::button .fr.ok -text OK grid .fr.ok -row 5 -column 3 grid columnconfigure .fr 1 -weight 1 grid columnconfigure .fr 3 -pad 7 grid rowconfigure .fr 3 -weight 1 grid rowconfigure .fr 5 -pad 7 wm title . "Windows" wm geometry . 350x300+300+300 ``` 在此示例中，我們將使用`label`小部件，`text`小部件和四個按鈕。 ```tcl label .fr.lbl -text Windows grid .fr.lbl -sticky w -pady 4 -padx 5 ``` 標簽窗口小部件已創建并放入網格中。 如果未指定列和行，則假定為第一列或行。 該標簽向西粘貼，并且其文本周圍有一些填充。 ```tcl text .fr.area grid .fr.area -row 1 -column 0 -columnspan 2 \ -rowspan 4 -padx 5 -sticky ewsn ``` `text`小部件已創建，并從第二行第一列開始。 它跨越`2`列和`4`行。 小部件和根窗口的左邊界之間有 4px 空間。 最后，它堅持所有四個方面。 因此，調整窗口大小時，`text`小部件會向各個方向擴展。 ```tcl grid columnconfigure .fr 1 -weight 1 grid columnconfigure .fr 3 -pad 7 grid rowconfigure .fr 3 -weight 1 grid rowconfigure .fr 5 -pad 7 ``` 我們在網格中的小部件之間定義一些空間。 在`text`小部件和按鈕之間放置最大的空間。  圖：窗口示例 在 Tcl/Tk 教程的這一部分中，我們提到了小部件的布局管理。