不間斷 Python 挑戰 Day 30 - 使用tkinter開發GUI程式：常用視窗元件

https://docs.python.org/3/library/tkinter.html
https://www.tcl.tk/man/tcl8.6/TkCmd/contents.html

視窗(Window)

title()：設定視窗標題
geometry("widthxheight")：設定視窗的寬與高，單位是像素(pixel)
minsize(width=int, height=int)：設定視窗最小的寬與高，單位是像素(pixel)
maxsize(width=int, height=int)：設定視窗最大的寬與高，單位是像素(pixel)
resizable(width=bool, height=bool)：設定是否可更改視窗寬與高的大小
mainloop()：等待處理視窗事件，讓程式可以繼續執行

from tkinter import *
window = Tk()
window.title("Hello World!")
window.minsize(width=500, height=500)
window.resizable(width=False, height=False)
window.mainloop()

元件(Widget)

標籤(Label)

text：設定文字內容
font：設定字型與大小
width：設定寬度，單位是字元
height：設定高度，單位是字元
padx：設定左右空白的空間，單位是像素
pady：設定上下空白的空間，單位是像素
background/bg：設定背景顏色
foreground/fg：設定文字顏色

label = Label(text="my label", font=("Arial", 14, "bold"), padx=5, pady=5, bg="red", fg="yellow")
label.pack()

按鈕(Button)

text：設定按鈕文字
font：設定字型與大小
width：設定寬度，單位是字元
height：設定高度，單位是字元
padx：設定左右空白的空間，單位是像素
pady：設定上下空白的空間，單位是像素
background/bg：設定背景顏色
foreground/fg：設定文字顏色
command：按鈕按下後所要執行的方法

def button_clicked():
　　label.config(text="Hello World!")

button = Button(text="Click Me", font=("Arial", 14, "bold"), padx=5, pady=5, bg="blue", fg="light green", command=button_clicked)
button.pack()

文字方塊(Entry)

font：設定字型與大小
width：設定寬度，單位是字元
padx：文字最左或最右與文字方塊邊框的間距，單位是像素
pady：文字最上或最下與文字方塊邊框的間距，單位是像素
background/bg：設定背景顏色
foreground/fg：設定文字顏色
state：設定是否可輸入文字，預設為NORMAL，表示可以輸入，若設定為DISABLED則無法輸入
show：輸入文字時顯示的字元，例如用在輸入密碼時可設定show="*"以顯示星號

insert(index, string)：在第index個字元前插入字串string
get()：取得文字方塊內的文字

entry = Entry(width=30, font=("Arial", 14, "bold"), bg="red", fg="yellow", state=NORMAL)
entry.insert(END, string="some text")
entry.pack()
print(entry.get())

some text

文字區域(Text)

font：設定字型與大小
width：設定寬度，單位是字元
height：設定高度，單位是字元
background/bg：設定背景顏色
foreground/fg：設定文字顏色
state：設定是否可輸入文字，預設為NORMAL，表示可以輸入，若設定為DISABLED則無法輸入

insert(index, string)：在第index個字元前插入字串string
get("row1.index1", "row2.index2")：取得從row1行第index1之後到row2行第index2個字元的文字

text = Text(height=5, width=30, font=("Arial", 14, "bold"), bg="blue", fg="light green", state=NORMAL)=
text.insert(END, "line 1\nline 2\nline 3")
text.pack()
print(text.get("1.0", "2.4"))

line 1
line

Spinbox

from_：當內容為數字時的初值
to：當內容為數字時的終值
font：設定字型與大小
width：設定寬度，單位是字元
background/bg：設定背景顏色
foreground/fg：設定文字顏色
state：設定是否可更改內容，預設為NORMAL，表示可以更動，若設定為DISABLED則無法輸入或使用
command：按下捲軸按鈕後所要執行的方法

def spinbox_used():
　　print(spinbox.get())

spinbox = Spinbox(from_=0, to=10, width=5, font=("Arial", 14, "bold"), command=spinbox_used, bg="red", fg="yellow", state=NORMAL)
spinbox.pack()

1
2
3
4
5
6
7
8
9
10

Scale

from_：連續數字範圍的初值
to：連續數字範圍的終值
font：設定字型與大小
width：設定滑桿寬度，單位是像素
background/bg：設定背景顏色
foreground/fg：設定文字顏色
orient：設定滑桿為水平(HORIZONTAL)或垂直(VERTICAL)，預設為垂直
length：設定滑桿長度，預設為100像素

def scale_used(value):
　　print(value)

scale = Scale(from_=0, to=10, font=("Arial", 14, "bold"), width=15, orient=HORIZONTAL, length=200, command=scale_used)
scale.pack()

1
2
3
4
5
6
7
8
9
10

選項鈕(Radiobutton)

text：設定選項鈕旁的文字
font：設定字型與大小
width：設定文字的寬度，單位是字元
height：設定文字的行數
padx：設定左右空白的空間，單位是像素
pady：設定上下空白的空間，單位是像素
background/bg：設定背景顏色
foreground/fg：設定文字顏色
value：選項鈕的值
command：點擊選項鈕時所要執行的方法
variable：設定或取得目前選取的選項按鈕

def radiobutton_used():
　　print(radio_state.get())

radio_state = IntVar()
radiobutton1 = Radiobutton(text="Option1", value=1, variable=radio_state, command=radiobutton_used)
radiobutton2 = Radiobutton(text="Option2", value=2, variable=radio_state, command=radiobutton_used)
radiobutton1.pack()
radiobutton2.pack()

1
2
1

核取方塊(Checkbutton)

text：設定核取方塊旁的文字
font：設定字型與大小
width：設定文字的寬度，單位是字元
height：設定文字的行數
padx：設定左右空白的空間，單位是像素
pady：設定上下空白的空間，單位是像素
background/bg：設定背景顏色
foreground/fg：設定文字顏色
command：點擊核取方塊時所要執行的方法
variable：設定或取得目前選取的核取方塊

def checkbutton_clicked():
　　print(f"Option1: {checked_state1.get()}, Option2: {checked_state2.get()}")

checked_state1 = IntVar()
checked_state2 = IntVar()

checkbutton1 = Checkbutton(text="Option1", variable=checked_state1, command=checkbutton_clicked)
checkbutton2 = Checkbutton(text="Option2", variable=checked_state2, command=checkbutton_clicked)
checkbutton1.pack()
checkbutton2.pack()

Option1: 1, Option2: 0
Option1: 1, Option2: 1
Option1: 0, Option2: 1

列表選單

font：設定字型與大小
width：設定文字的寬度，單位是字元
height：設定文字的行數
background/bg：設定背景顏色
foreground/fg：設定文字顏色
selectmode：設定選項為單選或多選，以及滑鼠拖曳時的選取方式
　　BROWSE：單選，點擊後拖曳滑鼠最後放開的位置為選取項目，此為預設
　　SINGLE：單選，點擊項目即為選取項目，不受滑鼠拖曳影響
　　MULTIPLE：多選，點擊項目即為選取項目，再點一下可取消選取
　　EXTENDED：多選，點擊後拖曳滑鼠到最後放開的區間為選取項目，或點選
　　　　　　　　 第一個項目後，按下shift點選第二個項目，兩者的區間即為選
　　　　　　　　 取項目

listbox = Listbox(width=15, height=4, selectmode=EXTENDED)
options = ["Option1", "Option2", "Option3", "Option4"]
for item in options:
　　listbox.insert(options.index(item), item)
listbox.pack()

功能表(Menu)

font：設定功能表項目的字型與大小
activebackground：設定功能表項目被選取時的背景顏色
activeforeground：設定功能表項目被選取時的文字顏色
activeborderwidth：設定功能表項目被選取時的背景寬度
borderwidth：設定功能表項目的表單寬度
background/bg：設定功能表項目未被選取時的背景顏色
foreground/fg：設定功能表項目未被選取時的文字顏色
image：設定功能表項目的圖示
tearoff：設定功能表上方的虛線分隔線，預設有分隔線，tearoff為1，此時按一下分隔線可將功能表分離；tearoff設為0則無分隔線

add_cascade()：建立階層式的功能表
add_command()：增加功能表的項目
add_separator()：增加功能表項目間的分隔線

menu = Menu()
window.config(menu=menu)

submenu1 = Menu(activebackground="green", activeborderwidth=10, borderwidth=20)
menu.add_cascade(label="menu1", menu=submenu1)

submenu1.add_command(label="label1")
submenu1.add_separator()
submenu1.add_command(label="label2")

submenu2 = Menu()
menu.add_cascade(label="menu2", menu=submenu2)

總結

程式範例