SwiftUI Academy · บทเรียน

การวนซ้ำด้วย ForEach

แสดงผลแถวจากอาร์เรย์ข้อมูล

บทเรียน 2 จาก 413 ขั้นตอน

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

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

Why ForEach

Hardcoding rows works for two items, but real data lives in arrays. ForEach builds one row per element automatically. 🔁

let fruits = ["Apple", "Pear", "Kiwi"]

ForEach Inside List

Drop a ForEach inside a List and it generates one row for every item in your collection, no matter how many there are.

List {
    ForEach(fruits, id: \.self) { fruit in
        Text(fruit)
    }
}

The Closure Gives You Each Item

The closure runs once per element, handing you that item so you can build its row from real data.

ForEach(fruits, id: \.self) { fruit in
    Text(fruit)
}

Identity Matters

SwiftUI needs to tell rows apart, so ForEach always wants a way to identify each element uniquely.

The id Parameter

For simple value arrays, pass id set to a key path like .self so each value can identify itself uniquely to SwiftUI.

ForEach(scores, id: \.self) { score in
    Text("\(score)")
}

Looping a Range

Need a fixed count instead of an array? Pass a range and ForEach hands you each index in turn, perfect for placeholder rows.

ForEach(0..<5) { index in
    Text("Row \(index)")
}

Building Rich Rows

Inside the closure you can return any view, so each ForEach row can be a full HStack with icons and labels.

ForEach(fruits, id: \.self) { fruit in
    HStack {
        Image(systemName: "leaf")
        Text(fruit)
    }
}

Mixing Static and Dynamic

A List can hold a static header Text and a ForEach loop together, blending fixed and data-driven rows.

List {
    Text("Fruits")
    ForEach(fruits, id: \.self) { Text($0) }
}

Looping Structs

When you loop an array of structs, each item carries multiple fields you can show across the row.

ForEach(people, id: \.name) { person in
    Text(person.name)
}

Data Drives the UI

Change the array and the rows follow right along. With ForEach, your list is simply a live mirror of whatever data you give it.

Beyond Lists

ForEach is not just for lists. It also fills VStack, HStack, and grids with repeated views from any collection.

VStack {
    ForEach(fruits, id: \.self) { Text($0) }
}

Quick Check

Recall what the ForEach closure receives.

ตอบคำถามในบทเรียนแบบโต้ตอบ

Recap

You learned ForEach: it turns any collection into rows, handing you each item so your UI tracks your data automatically. 🎉

เริ่มต้นได้ฟรี

เรียนรู้ Swift ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 30
บทเรียน: 120

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “การวนซ้ำด้วย ForEach” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การวนซ้ำด้วย ForEach”

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

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

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

บทเรียน “การวนซ้ำด้วย ForEach” ใช้เวลานานแค่ไหน

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

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

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

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

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