0Pricing
Swift Academy · บทเรียน

พื้นฐาน VStack, HStack และ ZStack

จัดเรียง View ในแนวตั้ง แนวนอน และตามความลึก พร้อมกำหนดระยะห่างและการจัดแนว

พื้นฐาน VStack, HStack และ ZStack เป็นบทเรียน Swift Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Swift Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

ยินดีต้อนรับ

`VStack`, `HStack` และ `ZStack` เป็นตัวบรรจุการจัดวางพื้นฐานสามชนิดใน SwiftUI การทำความเข้าใจสิ่งเหล่านี้เป็นสิ่งสำคัญสำหรับการสร้างส่วนติดต่อใด ๆ

VStack — แนวตั้ง

```swift VStack(alignment: .leading, spacing: 8) { Text("Title").font(.title) Text("Subtitle").foregroundColor(.secondary) Button("Action") {} } ```

HStack — แนวนอน

```swift HStack(spacing: 16) { Image(systemName: "star") Text("Favourite") Spacer() Text("4.9") } ```

ZStack — ความลึก

```swift ZStack(alignment: .bottomTrailing) { Image("background") Text("Overlay") .padding() .background(Color.black.opacity(0.5)) } ```

ตัวเลือกการจัดแนว

การจัดแนวของ VStack: `.leading`, `.center`, `.trailing` การจัดแนวของ HStack: `.top`, `.center`, `.bottom`, `.firstTextBaseline` การจัดแนวของ ZStack: `Alignment` ใด ๆ ที่รวมแนวนอนกับแนวตั้ง

พารามิเตอร์ระยะห่าง

```swift VStack(spacing: 0) { // no space between views Divider() Text("A") Divider() Text("B") } ```

การซ้อนสแต็ก

```swift VStack { HStack { Image("icon"); Text("Name") } Text("Description") } ``` คุณสามารถซ้อนสแต็กได้ตามต้องการเพื่อสร้างการจัดวางรูปแบบใดก็ได้

Spacer

```swift HStack { Text("Left") Spacer() // pushes views to edges Text("Right") } ```

Divider

```swift VStack { Text("Above") Divider() // horizontal line Text("Below") } ```

ประสิทธิภาพ: Group เทียบกับ Stack

หากมีมุมมองย่อยมากกว่า 10 รายการ ให้ห่อไว้ใน `Group` หรือเปลี่ยนไปใช้ `LazyVStack` เพื่อหลีกเลี่ยงข้อจำกัดของลำดับชั้นมุมมอง: ```swift ScrollView { LazyVStack { ForEach(items) { Text($0.name) } } } ```

ตรวจสอบความเข้าใจอย่างรวดเร็ว

สแต็กใดจัดวางมุมมองตามแกนความลึก จากด้านหน้าไปด้านหลัง

สรุปทบทวน

ประเด็นสำคัญ: • `VStack` — แนวตั้ง; `HStack` — แนวนอน; `ZStack` — ความลึก • ใช้พารามิเตอร์ `alignment:` และ `spacing:` • `Spacer()` ดันมุมมองข้างเคียงไปยังขอบ • ซ้อนสแต็กเพื่อสร้างการจัดวางที่ซับซ้อน • ใช้ `LazyVStack`/`LazyHStack` กับรายการขนาดใหญ่ ถัดไป: LazyVGrid และ LazyHGrid

คำถามที่พบบ่อย

บทเรียน “พื้นฐาน VStack, HStack และ ZStack” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “พื้นฐาน VStack, HStack และ ZStack” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Swift Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐาน VStack, HStack และ ZStack”

จัดเรียง View ในแนวตั้ง แนวนอน และตามความลึก พร้อมกำหนดระยะห่างและการจัดแนว คุณปฏิบัติ Swift Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Swift Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Swift Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “พื้นฐาน VStack, HStack และ ZStack” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Swift Academy นี้ได้ไหม

ได้ บทเรียน Swift Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. พื้นฐาน VStack, HStack และ ZStack
  2. LazyVGrid และ LazyHGrid
  3. ตัวเว้นระยะ Padding และตัวปรับแต่ง Frame
  4. GeometryReader สำหรับเค้าโครงที่ปรับตามสภาพแวดล้อม
← กลับไปที่ Swift Academy