SwiftUI Academy · บทเรียน

LazyVStack และ LazyHStack

แสดงผลเนื้อหาจำนวนมากแบบขี้เกียจเพื่อประสิทธิภาพ

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

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

The Eager Problem

A regular VStack builds every child at once. With hundreds of rows, that eager work can stutter and waste memory.

Meet LazyVStack

A LazyVStack only creates rows as they scroll into view, keeping huge lists fast and light. ⚡

LazyVStack {
    ForEach(items) { item in
        Row(item)
    }
}

Lazy Needs Scrolling

Always place a LazyVStack inside a ScrollView, since lazy loading only pays off when content scrolls offscreen.

ScrollView {
    LazyVStack {
        ForEach(items) { Row($0) }
    }
}

The Horizontal Twin

A LazyHStack does the same trick sideways, perfect for long, swipeable rows of cards or thumbnails.

ScrollView(.horizontal) {
    LazyHStack {
        ForEach(photos) { Thumb($0) }
    }
}

Same Spacing API

Lazy stacks accept the same spacing and alignment options as their eager cousins, so your layout code barely changes.

LazyVStack(alignment: .leading, spacing: 12) {
    ForEach(items) { Row($0) }
}

Cells Get Reused

As rows leave the screen, a LazyVStack can discard them, so memory stays steady even with thousands of items.

Lazy vs List

A List is lazy too, but a LazyVStack gives you styling freedom with no built-in separators or insets.

Pinned Headers

Lazy stacks support pinnedViews, letting section headers stick to the top as you scroll, like a contacts app.

LazyVStack(pinnedViews: [.sectionHeaders]) {
    Section(header: Header()) {
        Rows()
    }
}

When to Stay Eager

For a handful of items a plain VStack is simpler. Reach for lazy only when the list grows long.

Watch the Scroll

You will not see new LazyVStack rows being built, but Instruments shows they appear just in time as you scroll.

Scale with Confidence

With lazy stacks you can show endless feeds, galleries, and timelines without ever worrying about performance. ✨

Quick Check

Think about why lazy stacks exist.

Recap

You met LazyVStack and LazyHStack: stacks that create children on demand inside a ScrollView for smooth, large layouts. 🎉

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

บทเรียน “LazyVStack และ LazyHStack” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “LazyVStack และ LazyHStack”

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

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

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

บทเรียน “LazyVStack และ LazyHStack” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ SwiftUI Academy