Desktop Application ด้วย Qt ตอนที่ 2

Sirichat Sangjuiwong
MCUREGIS
Published in
2 min readMay 19, 2019

หลังจากที่ได้สร้างโปรเจ็คไปแล้วใน ตอนที่ 1 ตอนนี้เราจะมาเขียนโปรแกรมสำหรับกดปุ่มแสดงข้อความ Hello Qt กัน

  1. หลังจากที่สร้างโปรเจ็คเสร็จแล้วจะมีหน้า Interface ดังนี้ จะเห็นว่าไฟล์ที่เปิดอยู่คือ mainwindow.cpp เป็นไฟล์ที่เราจะทำการเขียน Event ต่างๆ

2. สร้างหน้า UI โดยการดับเบิ้ลคลิกที่ mainwindow.ui ภายในโฟลเดอร์ Forms ก็จะพบหน้า Interface ดังนี้ ทำการลากส่วนประกอบต่างๆมาวางได้เลย

3. ผมสร้างมา 2 อันดังนี้ ลองกด CTRL+S เพื่อ Save แล้วลองกดปุ่มรัน สีเขียวๆดู

4. ก็จะมีหน้าต่างโปรแกรมที่เราออกแบบไว้เปิดขึ้นมา ดูเสร็จแล้วก็ปิดไป

5. ทำการเพิ่ม Event ให้กับ ปุ่มโดยคลิกขวาที่ปุ่มของเราแล้วเลือก Go to slot โดยจะมีหน้าต่างขึ้นมาให้เราเลือก Signal ผมเลือกเป็น Clicked()

6. หลังจากกด ok มันจะทำการสร้างฟังก์ชันขึ้นมาใน mainwindow.cpp ซึ่งถ้าสังเกตุดูตรง pushButton จะเป็น objectName

7. ลองกลับมาดูที่หน้า UI ด้านขวามือจะมี Object Inspector บอกอยู่ว่ามี Object อะไรบ้าง ใน centralWidget ของเราตอนนี้มีอยู่ 2 อันคือ Button กับ Label ซึ่ง objectName ของ Label ของเรามันคือ label ก็แล้วแต่ว่าคุณจะเปลี่ยนชื่อเป็นอะไรนะ แต่มันจะอ้างอิงกันด้วย objectName นี่แหละ

8. ตอนนี้เราจะเขียนให้เปลี่ยนข้อความใน label เป็น “Hello Qt” เมื่อปุ่มถูกกด ซึ่งเดิมทีโปรแกรมของเราได้สร้าง Object ชื่อ ui ในการเข้าถึงข้อมูลต่างๆใน MainWindow Class เราจึงใช้ ui ตัวนี้ในการเข้าถึง Label ของเรา โดยเมื่อพิม ui แล้วตามด้วย . มันจะชี้เข้าไปใน class ตรงนี้เราก็เลือก label ของเรา

9. จากนั้นเราก็พิม . อีกที มันก็เป็นการเข้าถึง ข้อมูลหรือฟังก์ชันต่างๆ ของ Label ซึ่งในที่นี้เราจะเปลี่ยน Text ของมัน ก็เลือกฟังก์ชัน setText() โดยภายในวงเล็บ เราก็ใส่ข้อความ “Hello Qt” เข้าไป

10. กด CTRL+S เพื่อ Save แล้วลองรันดู ก็จะได้แบบนี้

--

--