ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

     จากบทเรียนก่อนหน้า ในเรื่องของการจัดโครงร่างด้วยเมธอด 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()

ผลลัพธ์การจัดโครงร่าง

     หากวิดเจ็ตที่จะจัดวางด้วยเมธอด grid() มีขนาดความกว้างและความสูงใกล้เคียงกัน วิดเจ็ตเหล่านั้นก็อาจจะวางอยู่ชิดจนไม่สวยงาม ดังนั้นเราสามารถเพิ่มระยะห่างไดด้วยออปชัน padx และ pady และนอกจากนั้นหากวิดเจ็ตไม่พอดีกีบเซลล์มันจะอยู่นำไปวางไว้ที่กึ่งกลาง ซึ่งอาจทำให้ดูไม่เรียบร้อย แต่เราก็สามารถใช้ออปชัน sticky เพื่อทำการเลื่อนวิดเจ็ตไปชิดที่ด้านใดด้านหนึ่งตามทิศทางที่เรากำหนดได้

 

 

ช่องทางการศึกษาเพิ่มเติม

การจัดโครงร่างด้วยเมธอด pack() ในโมดูล Tkinter

การจัดโครงร่างด้วยเมธอด place() ในโมดูล Tkinter 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ขอวิธีเช็คเว็บไซด์ที่มาจาก Google 10 หน้าแรกหน่อยค่ะ
โดย Kannaphat ส 27 ก.พ. 2021 4:59 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
12
ส 27 ก.พ. 2021 4:59 pm โดย Kannaphat
Review เว็บไซต์ หางานที่ต่างๆ
โดย fighthrmd125 ส 27 ก.พ. 2021 3:13 pm บอร์ด Share Knowledge
0
11
ส 27 ก.พ. 2021 3:13 pm โดย fighthrmd125
PDPA กับงาน HR ของบริษัท
โดย fighthrmd125 ส 27 ก.พ. 2021 1:48 pm บอร์ด Share Knowledge
0
8
ส 27 ก.พ. 2021 1:48 pm โดย fighthrmd125
ประโยชน์ของ การใช้ Skype และ Web board ในการทำงาน
โดย fighthrmd125 ส 27 ก.พ. 2021 12:23 pm บอร์ด Share Knowledge
0
12
ส 27 ก.พ. 2021 12:23 pm โดย fighthrmd125
การจ้างงานผู้พิการ
โดย fighthrmd125 พฤ 25 ก.พ. 2021 5:53 pm บอร์ด Share Knowledge
0
14
พฤ 25 ก.พ. 2021 5:53 pm โดย fighthrmd125
แนวทางการสรรหา ช่องทาง สรรหาผู้พิการเข้าทำงาน
โดย fighthrmd125 พฤ 25 ก.พ. 2021 5:12 pm บอร์ด Share Knowledge
0
9
พฤ 25 ก.พ. 2021 5:12 pm โดย fighthrmd125
Google Structured ส่วนการ vote ในบทความจะดึงข้อมูลมาจากไหนค่ะ
โดย eange08 พฤ 25 ก.พ. 2021 5:04 pm บอร์ด Joomla Development
1
11
พฤ 25 ก.พ. 2021 5:34 pm โดย eange08
B - ระบบ LINE API ไม่ตอบพบข้อมูล [2021-02][001]
โดย tsukasaz พฤ 25 ก.พ. 2021 3:35 pm บอร์ด MlineCRM Line + MD-CRM
1
6
พฤ 25 ก.พ. 2021 3:35 pm โดย tsukasaz