เขียนโปรแกรมด้วย Qt: ตอนที่ 3 Layouts

widget ใน Qt จะหมายถึงออบเจกต์ต่างๆ ที่มีไว้เพื่อควบคุมการทำงาน หรือเป็นส่วนที่ติดต่อกับผู้ใช้งาน ซึ่งจะเหมือนกับ control ในโปรแกรมที่เขียนผ่านระบบปฏิบัติการ Windows

การเพิ่ม widget ต่างๆ นั้นทำได้ง่ายๆ คือ ลากวางลงบนฟอร์ม แต่สิ่งที่ดูเหมือนจะไม่ง่าย คือ การจัดเรียงชิ้นส่วนต่างๆ ให้สวยงาม แต่ถ้าเข้าใจหลักการแล้วก็ไม่ยาก

บน Windows การวางคอนโทรลส่วนใหญ่จะง่ายในการกำหนดตำแหน่ง เพราะสามารถกำหนดตำแหน่งหรือ Position ได้โดยตรง คือ มีการกำหนดผ่าน Properties ของออบเจ็กต์ แต่สำหรับ Qt ก็มี Properties เหมือนกัน แต่กว่าจะกำหนดได้ บางครั้งก็วุ่นวาย ยากเย็นแสนเข็ญ

แต่กลับกัน การทำงานแบบ Responsive หรือ การเปลี่ยนแปลงตามหน้าจออุปกรณ์ที่ใช้งานในโลกของ Qt กลับทำได้ง่ายกว่า และง่ายมากด้วย (ถ้าเข้าใจหลักการ)

สิ่งที่ทำให้การจัดเรียง widgets บนฟอร์มทำได้ง่ายๆ นั้นเพราะมี Layouts และ Spacer มาช่วยจัดการ โดย Layout จะมี อยู่ 4 แบบ คือ

1. Vertical Layout เป็นการจัดเรียงแนวตั้ง
2. Horizontal Layout เป็นการจัดเรียงแนวนอน
3. Grid Layout เป็นการจัดเรียงแบบกริด คือ จะแบ่งหน้าจอเท่ากันแล้วเรียงจากซ้ายไปขวา และบนลงล่าง เป็นตารางช่องเท่าๆ กัน ก็เหมือนการวาง icon บนหน้าจอโทรศัพท์ หรือ คอมพิวเตอร์นั่นแหละ
4. Form Layout เป็นการวางแบบ Form คือ มีข้อความด้านซ้าย และ widget อยู่ขวามือ

กรอบสีแดงซ้ายมือ คือ Layouts ที่สามารถเลือกมาใช้งาน สังเกตที่ฟอร์มจะมีการวาง Layout แบบต่างๆ โดยมีกรอบสีแดงบางๆ ล้อมรอบ และกรอบสีแดงด้านขวามือจะเป็นหน้าจอบอกว่าแต่ละส่วนเป็น Layout แบบไหน สามารถคลิกดูได้ และในกรอบสีเขียวเป็นหน้าตาโปรแกรมเมื่อสั่งรัน

การวงโดยไม่ใช้ Layout ก็ใช้ได้ไม่มีปัญหาอะไร เพียงแต่เวลาขยายหน้าจอแล้วจะมีปัญหาตำแหน่งของ objects ไม่ขยับตาม

เมื่อเปลี่ยนไปใช้ Vertical Layout ก็มีปัญหา objects จะเรียงไม่เป็นไปตามที่ต้องการ คือ จะเฉลียเต็มหน้าจอ

แก้ไขด้วยการเพิ่ม Vertical Spacer ก็ช่วยขยับให้ object ไปชิดขอบด้านล่างได้ แต่ความกว้างยังคงขยายเต็มหน้าจอ

แก้ไขปัญหาด้วยการใช้ Layouts ผสมผสาน โดยใช้แบบ Vertical ก่อนเพื่อบรรจุปุ่ม 2 ปุ่ม แล้วเอาไปไว้ใน Horizontal Layout และใช้ Horizontal Spacer จัดให้ชิดขอบด้านขวาอีกทีหนึ่ง ก็จะได้รูปแบบที่เราต้องการ

ผลลัพธ์ที่ได้ เมื่อขยายหน้าจอปุ่ม OK และ Cancel ก็ยังคงชิดขอบ window เหมือนเดิมตามที่เราต้องการ

การจัด Layout นั้นช่วงแรกๆ จะดูมีปัญหาเห็นอย่างมาก แต่พอเข้าใจหลักการแล้ว กลับกลายเป็นสิ่งที่ง่ายมาก และใช้งานได้เป็นอย่างดี แต่ปัญหาไม่ได้มีอยู่แค่นี้ เดี๋ยวจะมาอัพเดทต่อนะครับ ขอพักก่อน :D

ตัวอย่างการจัดเลย์เอาท์ใน Qt