จากบทเรียนก่อนหน้า ในเรื่องของการจัดโครงร่างด้วยเมธอด pack() และ place() ในการจัดโครงร่างตามคีย์เวิร์ดอาร์กิวเมนต์ และการจัดโครงร่างตามการระบุตำแหน่งจุดพิกัดแบบตัวเลข นอกเหนือจากนี้แล้วยังมีอีกวิธีหนึ่ง โดยจะเป็นการจัดโครงร่างตามแบบแถวและคอลัมน์คล้ายกับตาราง ซึ่งเราจะเรียกเมธอดนี้ว่า grid() โดยจะมีข้อกำหนดที่แตกต่างกันออกไป แต่ก็สามารถใช้งานในการกำหนดตำแหน่ง หรือโครงสร้างต่างๆได้เช่นกัน และในบทเรียนนี้เราจะมาพูดถึงการจัดโครงร่างด้วยเมธอด grid() กัน
การจัดโครงร่างด้วยเมธอด grid()
เมธอด grid() จะเป็นการแบ่งพื้นที่ออกเป็นช่องเซลล์(กริด) แบบแถวและแบบคอลัมน์คล้ายกับตาราง แล้วทำการวางวิดเจ็ตลงในแต่ละช่อง โดยเลขลำดับจะเริ่มจาก 0,0 ซึ่งตัวเมธอด grid() นี้จะมีอปปชันหรือคีย์เวิร์ด สำหรับกำหนดลักษณะการจัดวางตำแหน่งต่างๆ ดังต่อไปนี้
| row, column | กำหนดลำดับแถวและคอลัมน์ที่จะวางวิดเจ็ตนั้นลงไป |
| rowspan | จำนวนแถวที่จะยุบรวมกัน |
| columnspan | จำนวนคอลัมน์ที่จะยุบรวมกัน |
| sticky | จะยึดวิดเจ็ตติดกับแนวขอบทางด้านใดของช่องเซลล์ โดยค่าที่กำหนดได้จะคล้ายกับออปชัน anchor ของเมธอด pack() ได้แก่ N, E, S, W, NE, SE, NW, SW วิดเจ็ตจะขยายออกในแนวนอนจนเต็มความกว้างของเซลล์ |
| padx, pady | กำหนดระยะห่างในแนวแกน x และ y กับวิดเจ็ตอื่นที่อยู่ติดกัน ตามลำดับ |
| ipadx, ipady | กำหนดระยะห่างในแนวแกน x และ y ระหว่างเนื้อหากับขอบของวิดเจ็ต ตามลำดับ |
สำหรับเมธอด grid() จะต้องระบุ row และ column เสมอ เพื่อกำหนดตำแหน่งหรือช่องเซลล์ที่จะวางวิดเจ็ตนั้นลงไป โดยในแต่ละแถวหรือคอลัมน์ ไม่จำเป็นต้องมีวิดเจ็ตครบหรือเท่ากันทั้งหมด อาจะเว้นว่างในบางช่องก็ได้ ขึ้นอยู่กับการระบุออปชัน row และ column เป็นหลัก
ตัวอย่างการใช้งาน
from tkinter import *
window = Tk()
window.geometry('300x150')
window.config(bg='light green')
bt0 = Button(text="ZERO")
bt1 = Button(text='ONE')
bt2 = Button(text='TWO')
bt3 = Button(text='THREE')
bt5 = Button(text="FIVE")
bt6 = Button(text="SIX")
bt0.grid(row=0, column=0, padx=10, pady=10)
bt1.grid(row=0, column=1, padx=10, pady=10,sticky=W)
bt2.grid(row=0, column=2, padx=10, pady=10,ipadx=50)
bt3.grid(row=1, column=0, padx=10, pady=10,sticky=N)
bt5.grid(row=1, column=1, padx=10, pady=10,columnspan=1,ipadx=10, ipady=10)
bt6.grid(row=1, column=2, padx=10, pady=10,sticky=NW)
mainloop()ผลลัพธ์
ผลลัพธ์การจัดโครงร่าง
หากวิดเจ็ตที่จะจัดวางด้วยเมธอด grid() มีขนาดความกว้างและความสูงใกล้เคียงกัน วิดเจ็ตเหล่านั้นก็อาจจะวางอยู่ชิดจนไม่สวยงาม ดังนั้นเราสามารถเพิ่มระยะห่างไดด้วยออปชัน padx และ pady และนอกจากนั้นหากวิดเจ็ตไม่พอดีกีบเซลล์มันจะอยู่นำไปวางไว้ที่กึ่งกลาง ซึ่งอาจทำให้ดูไม่เรียบร้อย แต่เราก็สามารถใช้ออปชัน sticky เพื่อทำการเลื่อนวิดเจ็ตไปชิดที่ด้านใดด้านหนึ่งตามทิศทางที่เรากำหนดได้
ช่องทางการศึกษาเพิ่มเติม
