SwiftUI Academy · บทเรียน

สร้างแถวสวิตช์ที่นำกลับมาใช้ใหม่ได้

สร้างมุมมองลูกที่เปลี่ยนแปลงสถานะของมุมมองแม่

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

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

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

A Component That Edits

Lets build a reusable row that flips a setting. The trick: the row mutates the parents state through a @Binding. 🧩

Design the Inputs

The row needs a label to show and a binding to change. So it takes a title string and a Bool binding.

Declare the Child View

Create a struct with a plain title and a binding for the value it will toggle on and off.

struct ToggleRow: View {
    let title: String
    @Binding var isOn: Bool
    var body: some View { Text("Placeholder") }
}

Build the Body

Inside the body, a single Toggle shows the title and writes through the binding when tapped.

var body: some View {
    Toggle(title, isOn: $isOn)
        .padding()
}

Use It in a Parent

The parent owns the setting with @State, then drops the row in and passes the value with a dollar sign.

struct SettingsView: View {
    @State private var notify = true
    var body: some View { ToggleRow(title: "Notify", isOn: $notify) }
}

Reuse It Everywhere

Now add ten settings with ten rows, each bound to its own state. One small view, reused across the whole screen.

ToggleRow(title: "Sound", isOn: $sound)
ToggleRow(title: "Vibrate", isOn: $vibrate)

Parent Sees Every Change

Flip any row and the parents matching @State updates instantly. The parent can react to the new value right away.

Text(notify ? "On" : "Off")
    .foregroundStyle(notify ? .green : .gray)

Keep the Child Dumb

The row holds no opinions about where data lives. It just edits the binding it was given, which makes it portable.

Add a Little Style

Because the row is one view, you can style it once and every instance looks the same. Consistency comes for free. 💅

Toggle(title, isOn: $isOn)
    .tint(.orange)
    .font(.headline)

Swap the Type Later

Want a row for a number instead? Change the binding type and the same pattern works for any editable value.

Small Pieces, Big Apps

Reusable binding-driven rows are how real apps stay tidy. Compose many tiny editors into one clean settings screen.

Quick Check

Quick check on the toggle row.

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

Recap: A Reusable Editor

A child view with a @Binding becomes a reusable editor. Pass state in with the dollar sign and drop it in anywhere. 🎉

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

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

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

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

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

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

บทเรียน “สร้างแถวสวิตช์ที่นำกลับมาใช้ใหม่ได้” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “สร้างแถวสวิตช์ที่นำกลับมาใช้ใหม่ได้”

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

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

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

บทเรียน “สร้างแถวสวิตช์ที่นำกลับมาใช้ใหม่ได้” ใช้เวลานานแค่ไหน

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

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

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

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

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