框架(frame)是一種容器型的視窗元件，它的功能是可以把某些視窗元件裝載在一起，這樣一方面可以讓程式的介面看起來比較有條理，另一方面對我們寫程式的人來說，把多個視窗元件裝載在同一個frame裡，也可以方便我們控制整組的視窗元件，例如:同時隱藏或顯示。這一篇文章會介紹ttk的frame及labelframe等兩種視窗元件。

20.1 建立框架

相信經過之前章節的洗禮，大家對於建立視窗元件應該已經非常得心應手了，如果和你說建立框架(frame)的命令是::ttk::frame，你知道怎麼建立frame嗎? 應該沒問題吧!! 不就是::ttk::frame加上path再加上一些選項嗎? 是的就是這樣，下面的例子展示了建立frame的程式片段：



嗯~建立frame就真的只有這樣而以，但如果執行上面的程式可能會令你感到失望，因為root視窗上竟然什麼都沒有，甚至找不到root視窗。請不要懷疑這並不是程式出了問題，而是因為frame預設的樣式就是這個樣子，它沒有外框，沒有鮮明的背景，也沒有預設的寬度和高度。

□ 把視窗元件放進框架

如果想要真正的展現frame的特性，在它裡放點東西可以更容易觀察些，因為frame就是為此而存在的。現在就讓我們把上面的程式小改一下：



程式的第1行建立了一個叫.f1的frame，然後在第2~4行我建立了3個核取按鈕，並分別指定它們顯示Tcl、Python及Ruby。請特別注意!! 3個核取按鈕的路徑都是掛在.f1之下，所以根據「階層式路徑」的觀念，它們都會排放在.f1裡面。接下來的第5行我們用pack命令把剛剛建立的3個核取按鈕由上至下的排放。接下來請看到第7~11行，它們跟1~5行的觀念是一樣的，唯一不同的地方只有3個核取按鈕改成由左至右排放。最後第11行把兩個frame即.f1及.f2由上至下排放。這個程式執行起來像這樣：

圖 20-1

這個例子用了2個frame把6個核取方塊分成兩組，然後一組由上至下排放，另一組由左至右排放。有了frame是不是讓視窗的佈局更靈活了呢? 如果你感覺不出來的話，請試著不要使用frame然後排出一樣的佈局(連放大縮小的功能也要一樣)。相信你試過就會知道frame多好用了。

□ 均分父視窗元件的寬或高

在很多時候我也會用frame把多個按鈕組合在一起，讓它們均勻的分配父視窗元件的寬或高，因為這樣會讓介面好看些。請看下面的程式：



這個程式的1~2行，很單純的建立了一個lable及一個entry。接下來在第3行的地方建立了一個frame，然後在4~5行建立了兩個按鈕，而且這兩個按鈕的路徑都是掛在.f1之下，所以它們都會被排放在.f1的裡面，然後第6行使用了pack命令把這兩個按鈕排放出來。

第7~8行改使用grid來放排視窗元件，它把.lblName及.txtName放在root視窗的第一列且各佔一個格子，然後把.f1放在第二列但佔了2個格子。最後9~10行設定了root視窗上位於第1行第1列的視窗元件都要隨root視窗放大縮小。

所以程式執行起來像這樣：

圖 20-2

請注意下方的兩個按鈕，它們很均勻的佔據了橫向的空間。

□ 群組隱藏及顯示

在這篇文章的一開頭有提到，透過frame可以群組某些視窗元件，並且控制它們整組顯示或是隱藏，現在就讓我們來看看怎麼做：



這個程式的第一個重點在第7行，請看到-command裡的內容，我們透過pack forget來把.f1隱藏起來。第二個重點在第8行，對於已經隱藏起來的.f1我們可以再透過pack命令把它排放出來。其中，不管是第7行還是第8行，因為所有的核取方塊都是放在.f1裡面，所以它們會跟著被隱藏或是顯示。透過這個小技巧我們正確的完成了群組顯示或隱藏的功能。

20.2 調整框架的外觀

如果你希望修改frame預設的樣式，frame也有-borderwidth選項可以讓你調整邊框的大小，以及-relief選項讓你調整邊框的樣式。注意哦!!預設的情況下frame的邊框大小是0而且邊框樣式是flat，也就是說你可能要同時指定這兩個項目才會看出效果，讓我們再小改一下之前看過的程式：



請注意到第1行及第6行，我指定了frame的邊框大小是2，然後樣式是groove。而且為了方便觀查，我在第11行加上了-padx及-pady選項，這可以讓frame和root邊框有一點額外的空間。它執行起來像這樣：

圖 20-3

加了邊框是不是更有分組的感覺了呢? 如果你不小心忘了-relief的使用方法，請參考這一篇文章。

20.3 標籤式框架

標籤式框架和一般的框架有一些小小的不同，它可在框邊的框線上加上文字說明，而且預設是會顯示框線的，請看下面的例子：



請看第1行::ttk::labelframe是用來建立標籤式框架的命令，-text選項可以用來設定它的說明文字。它在Mac的系統下執行起來像這樣：

圖 20-4

圖中上框線的上面多了一行說明文字。如果是在Windows或Linux平台的話，說明文字會剛好卡在框線上。

labelframe也允許我們透過-labelanchor選項來設定說明文字要放在框線上的哪個位置，它可以接受的值是nw、n、ne、en、e、es、se、s、sw、ws、w及wn。說真的這個選項我平常都是使用預設值，如果你有興趣想知道這些設定值的效果，請自己試看看吧!!