>>> Let's run Python on Mobile

วันอาทิตย์, พฤศจิกายน 20, 2548

จัดเรียง widget ด้วย grid

Python for PocketPC
Geometry Manager ช่วยจัดเรียง widget บน root window
เมื่อทำเสร็จเรียบร้อย widget จึงจะสามารถปรากฎให้เราเห็นได้
ที่ผ่านมา ได้แนะนำวิธีใช้ Geometry Manager ที่เรียกว่า pack
แต่ pack นั้น ใช้เรียง widgetให้ได้ดังใจเรา ได้ค่อนข้างยาก

grid เป็น Geometry Manager อีกอัน ที่อาจจะซับซ้อนกว่าเล็กน้อย
แต่สามารถ วาง widget ตามแนว x,y คล้ายๆตาราง ดูจะน่าใช้กว่า

สมมติคุณสร้าง Button a,b,c,d,e และ f
เราสามารถใช้คำสั่ง grid ตามด้วย option ในวงเล็บ เพื่อสั่งว่าจะให้แต่ละ Button ไปอยู่ ตามแนว row และ column ที่เท่าไร
ดังตัวอย่าง
import sys
sys.path.append('\\Storage Card\\python\\lib\\python23.zip\\lib-tk')
import Tkinter
root=Tkinter.Tk()
root.title('Python & Tk')
a=Tkinter.Button(text="Something")
b=Tkinter.Button(text="Anything")
c=Tkinter.Button(text="Nothing")
d=Tkinter.Button(text="Hi !!")
e=Tkinter.Button(text="Hello")
f=Tkinter.Button(text="Exit" , command=sys.exit)
a.grid(row=0,column=0)
b.grid(row=0,column=1)
c.grid(row=0,column=2)
d.grid(row=1,column=0)
e.grid(row=1,column=1)
f.grid(row=1,column=2)
root.mainloop()



หรือจะเรียกใช้ คำสั่ง grid ตามหลังเวลาสร้างแต่ละ Button เลยก็ได้
ดัง code ข้างล่าง ก็จะได้ผลออกมาเหมือนกัน
import sys
sys.path.append('\\Storage Card\\python\\lib\\python23.zip\\lib-tk')
import Tkinter
root=Tkinter.Tk()
root.title('Python & Tk')
a=Tkinter.Button(text="Something").grid(row=0,column=0)
b=Tkinter.Button(text="Anything").grid(row=0,column=1)
c=Tkinter.Button(text="Nothing").grid(row=0,column=2)
d=Tkinter.Button(text="Hi !!").grid(row=1,column=0)
e=Tkinter.Button(text="Hello").grid(row=1,column=1)
f=Tkinter.Button(text="Exit" , command=sys.exit).grid(row=1,column=2)
root.mainloop()

จะเห็นว่าแต่ละ Button มีขนาดไม่สม่ำเสมอกัน
ต่อไปเราจะพยายาม แก้ไข ขนาดของบาง Button

Button ไหนสั้นไป ก็ใช้ option ชื่อ sticky )เพิ่มเข้าไป
เพื่อบอกให้ Botton แผ่ออกไปให้เต็มช่องว่าง
ดัง code ข้างล่าง เราใช้ sticky='E'+'W' )
เพื่อบอกให้ Button d และ e แผ่ออกไปตามแนว East และ West
import sys
sys.path.append('\\Storage Card\\python\\lib\\python23.zip\\lib-tk')
import Tkinter
root=Tkinter.Tk()
root.title('Python & Tk')
a=Tkinter.Button(text="Something").grid(row=0,column=0)
b=Tkinter.Button(text="Anything").grid(row=0,column=1)
c=Tkinter.Button(text="Nothing").grid(row=0,column=2)
d=Tkinter.Button(text="Hi !!").grid(row=1,column=0,sticky='E'+'W')
e=Tkinter.Button(text="Hello").grid(row=1,column=1,sticky='E'+'W')
f=Tkinter.Button(text="Exit" , command=sys.exit)
f.grid(row=1,column=2,sticky='E'+'W'))
root.mainloop()



แต่ถ้า widget แต่ละแนว มีจำนวนไม่เท่ากัน ก็คงจะนำมาเรียงให้เรียบร้อยเป็นตารางหมากรุก คงจะยาก
option ชื่อ columnspan ช่วยบอกให้ widget แผ่ขยาย ไปกินที่ช่องข้างๆ
ดังตัวอย่าง ถัดไป เราลบ Button e ทิ้ง แล้วบอกให้ Button d แผ่ไปครอบคลุมพื้นที่ 2 column
import sys
sys.path.append('\\Storage Card\\python\\lib\\python23.zip\\lib-tk')
import Tkinter
root=Tkinter.Tk()
root.title('Python & Tk')
a=Tkinter.Button(text="Something").grid(row=0,column=0)
b=Tkinter.Button(text="Anything").grid(row=0,column=1)
c=Tkinter.Button(text="Nothing").grid(row=0,column=2)
d=Tkinter.Button(text="Hi !!")
d.grid(row=1,column=0,sticky='E'+'W',columnspan=2)
f=Tkinter.Button(text="Exit" , command=sys.exit)
f.grid(row=1,column=2,sticky='E'+'W')
root.mainloop()




code เดียวกัน ลอง run บน PC



ตัวอย่าง code
tkGridTest1.zip
tkGridTest2.zip
tkGridTest3.zip
tkGridTest4.zip

กลับไปหน้าหลัก>>>
หน้าก่อน