ในการสร้างแอปพลิเคชันเพื่อใช้งานจริงนั้น อาจต้องมีวิดเจ็ตมากกว่า 1 ตัวอยู่บนวินโดว์เดียวกัน ดังนั้น เราจำเป็นต้องจัดวางวิดเจ็ตเหล่านั้นให้เป็นระเบียบและดูสวยงาม เพื่อให้ใช้งานง่ายและลดความสับสน ซึ่งใน Tkinter จะกำหนดโครงร่างเพื่อจัดวางวิดเจ็ตลงบนสิ่งที่เรียกว่า คอนเทนเนอร์ (Container) เพื่อจัดการกับตำแหน่งหรือโครงสร้างของปุ่มต่างๆ ทำให้เราสามารถวางหรือขยายปุ่มได้ และในบทเรียนนี้เราจะมาพูดถึงการจัดโครงร่างด้วยเมธอด pack() กัน
การจัดโครงร่างด้วยเมธอด pack()
วิดเจ็ตเกือบทั้งหมดของ Tkinter จะต้องมีเมธอด pack() เพื่อใช้ในการกำหนดโครงสร้างของตัวมันเองบนคอนเทอเนอร์ เช่น วินโดว์ หรือ เฟรม โดยเมธอดดังกล่าวจะมีออปชัน (Option) หรือคีย์เวิร์ดอาร์กิวเมนต์ สำหรับกำหนดลักษณะการจัดวางดังนี้
| side | เป็นการกำหนดทิศทางการจัดเรียงว่าจะเริ่มจากด้านใด โดยมีค่า คือ TOP, LEFT, RIGHT, BOTTOM |
| padx | เป็นการกำหนดระยะห่างในแนวแกน x (แนวนอน) กับวิดเจ็ตอันที่อยู่ติดกัน |
| pady | เป็นการกำหนดระยะห่างในแนวแกน y (แนวตั้ง) กับวิดเจ็ตอันที่อยู่ติดกัน |
| ipadx | เป็นการกำหนดระยะห่างในแนวแกน x ระหว่างเนื้อหากับขอบของวิดเจ็ต |
| ipady | เป็นการกำหนดระยะห่างในแนวแกน y ระหว่างเนื้อหากับขอบของวิดเจ็ต |
| fill | หากมีพื้นที่ว่างในแนวแกน x,y จะยืดวิดเจ็ตออกไปจนเต็มพื้นที่ หรือมากที่สุด |
| expand | หากมีการขยายวินโดว์ จะกระจายตำแหน่งให้พอดีกับพื้นที่โดยอัตโนมัติ |
| anchor | เป็นการกำหนดตำแหน่งจัดวางหรือจุดยึด โดยระบุเป็นชื่อทิศตามแนวขอบของคอนเทนเนอร์ โดยมีค่า คือ N, E, S, W, NE, SE, NW, SW และ CENTER |
จากออปชัน หรือคีย์เวิร์ดของเมธอด pack() ที่ได้กล่าวมานั้น ตามปกติแล้วเรามักจะเลือกกำหนดเพียงบางอัน แต่จะต้องให้สอดคล้องกันและไม่ขัดแย้งกัน หรือบางกรณีอาจใช้ร่วมกันจึงจะเห็นผลอย่างชัดเจน ไม่อย่างนั้นผลลัพธ์ที่ได้อาจจะผิดเพี้ยนไปจากที่เราคาดหวัง
ตัวอย่างการใช้งาน
from tkinter import *
window = Tk()
window.geometry('300x150')
window.config(bg='light green')
bt1 = Button(text='ONE')
bt2 = Button(text='TWO')
bt3 = Button(text='THREE')
bt1.pack(side=TOP, fill=X)
bt2.pack(anchor=CENTER,expand=YES)
bt3.pack(side=BOTTOM, fill=X)
mainloop()ผลลัพธ์
ผลลัพธ์การจัดโครงร่าง
จากผลลัพธ์หากเรากำหนดออปชัน fill วิดเจ็ตจะขยายขนาดให้เต็มพื้นที่ตามแนวที่เราได้กำหนด (X, Y) แต่จะต้องไม่มีวิดเจ็ตอื่นขวางอยู่ในแนวแกนนั้นๆ ส่วนออปชัน expand จะทำให้วิดเจ็ตกระจายตำแหน่งจนพอดีกับขนาดของคอนเทนเนอร์ หากเราทำการขยายขนาดของคอนเทนเนอร์ ตำแหน่งของวิดเจ็ตนั้นก็จะเปลี่ยนตามไปด้วย
ช่องทางการศึกษาเพิ่มเติม
