เขียนโปรแกรมด้วย 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 แบบไหน สามารถคลิกดูได้ และในกรอบสีเขียวเป็นหน้าตาโปรแกรมเมื่อสั่งรัน