tkinter ttk.Frame 控件

本系列文章中提到的控件，特指 ttk 模塊下的對應控件。

相比於前文提到的 ttk.Button 控件，ttk.Frame 控件可能相對陌生，實際上，Frame 控件是比 Button 更為基礎的控件。

簡單來講，一個 Frame 就是一個展示單純的矩形區域的控件，類似於 html 中的 div 標簽。

從視覺上和編碼上組織用戶界面，是 Frame 的一個重要用途，我們通常把其他控件放置在 Frame 中，而不是直接放置在 Tk() 窗口中。

如何創建一個 `Frame`

創建 Frame 和創建其他控件的步驟一樣，首先要創建 ttk.Frame 對象，然后把它放置在窗口中即可。

示例代碼如下：

from tkinter import *
from tkinter import ttk

root = Tk()
s = ttk.Style()
s.configure("1.TFrame",background='red')
frame = ttk.Frame(root,style="1.TFrame",width=100,height=100)
frame.grid(column=0,row=0)

root.mainloop()

由於 ttk.Frame 默認風格在窗口中難以分辨位置，所以將其背景設置為紅色。

代碼執行結果如下：

如何創建一個ttk.Frame

`ttk.Frame` 的 `padding` 參數

padding 參數用於指定位於 Frame 內部控件四周空間的大小。

簡單講，就是放置在 Frame 中的控件距離 Frame 邊框的距離。

示例代碼如下：

from tkinter import *
from tkinter import ttk

root = Tk()
s = ttk.Style()
s.configure("1.TFrame",background='red')
frame = ttk.Frame(root,style="1.TFrame",padding=(5,10,15,20)) # 左上右下的距離
btn = ttk.Button(frame,text="一個按鈕")
btn.grid(column=0,row=0)
frame.grid(column=0,row=0)

root.mainloop()

執行結果如下圖：

ttk.Frame的padding參數

圖中，按鈕左側、上側、右側和下側的距離分別是 5、10、15、20。

如果以上代碼換成

frame = ttk.Frame(root,style="1.TFrame",padding=5) # 四周

表示按鈕四周距離都是5。

如果換成

frame = ttk.Frame(root,style="1.TFrame",padding=(5,10))

表示按鈕左右距離是5，上下距離是10。

padding 參數值是一個數字，表示四周距離；如果是兩個數字的元組，分別表示左右和上下。

`ttk.Frame` 樣式和邊框

和 Button 一樣，Frame 也有邊框樣式，以下代碼演示了如何設置 Frame 的樣式。

from tkinter import *
from tkinter import ttk

root = Tk()
s = ttk.Style()
s.configure("1.TFrame",background='white',borderwidth=2,relief=SUNKEN)
frame = ttk.Frame(root,style="1.TFrame",padding=(5,10,15,20))
btn = ttk.Button(frame,text="一個按鈕")
btn.grid(column=0,row=0)
frame.grid(column=0,row=0)

root.mainloop()

代碼執行結果：

ttk.Frame的樣式和邊框

如果把 s=ttk.Style() 放在 root=Tk() 上方，會有奇怪的事情發生哦，不要這樣做！！

讓 `ttk.Frame` 占用整個窗口

上篇介紹 grid 布局時，遺留下了一個問題，如何讓控件占據整個窗口，即使窗口被拖拽，也能及時填充呢？

答案是使用 rowconfingure 、columnconfigure 和 sticky 參數相結合。

示例代碼如下：

from tkinter import *
from tkinter import ttk

root = Tk()
s = ttk.Style()
s.configure("1.TFrame",background='red')
frame = ttk.Frame(root,style="1.TFrame",width=10,height=50)
frame.grid(column=0,row=0,sticky=(N,E,W,S))
root.rowconfigure(0,weight=1)
root.columnconfigure(0,weight=1)

root.mainloop()

代碼執行結果：

ttk.Frame填充整個窗口