วิธีการใช้ HStack, VStack และ ZStack บน SwiftUI

ภาพจาก: https://insights.dice.com/2019/06/04/swiftui-apple-wwdc-2019/

การใช้ Stack ใน SwiftUI สามารถช่วยให้คุณเรียง UI ต่างๆไว้ด้วยกัน โดยที่แต่ละ UI มีความเชื่อมโยงกัน และเป็นกลุ่มเดียวกัน

ซึ่งบน SwiftUI มี Stack อยู่ 3 ประเภท ได้แก่ HStack, VStack และ ZStack โดยแต่ละ Stack มีความหมายว่าอย่างไร? แล้วใช้ในกรณีไหน? เรามาติดตามไปพร้อมๆกันเลย

• HStack
  HStack คือ การเรียง child views ในแนวนอน ตัวอย่างเช่น เราจะเรียงรูปภาพและข้อความในแนวเดียวกันซึ่งเป็นแนวนอน ดังนี้

โดยวิธีการ Implement ดังนี้

• VStack
  VStack คือ การเรียง child views ในแนวตั้ง ตัวอย่างเช่น เราจะเรียงรูปภาพและข้อความในแนวตรงกันซึ่งเป็นแนวตั้ง ดังนี้

ซึ่ง Code จะเป็นดังนี้

• ZStack
  ZStack คือ การเรียง child views แบบซ้อนทับกัน ตัวอย่างเช่น เราจะเอาข้อความมาทับรูปภาพได้ดังนี้

ซึ่ง Code จะเป็นดังนี้

จบไปแล้วสำหรับการแนะนำ Stack เบื้องต้นของ SwiftUI ซึ่งสามารถช่วยให้เราออกแบบ View ที่ต้องการได้ ซึ่ง Stack แต่ละประเภทมีหน้าตาแตกต่างกันออกไป เราสามารถนำ Stack มาใช้ให้สอดคล้องกับงานของเรา อีกทั้งยังสะดวกรวดเร็วอีกด้วยครับ

อ้างอิง

https://developer.apple.com/documentation/swiftui/view-layout-and-presentation