SwiftUI Academy · บทเรียน

การเพิ่มค่าด้วย Stepper

ปรับค่าเพิ่มและลดด้วยตัวควบคุม Stepper

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

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

Meet the Stepper

A Stepper shows minus and plus buttons to nudge a value up or down. It is ideal for quantities like item counts. ➕

Stepper Holds a Number

Like Slider, a Stepper edits a number. Tapping plus increases it and tapping minus decreases it by one step.

@State private var count = 1

Bind to State

Connect the value with the dollar sign binding and give it a label. SwiftUI handles the plus and minus taps for you.

Stepper("Quantity", value: $count)

Set a Range

Pass an in range to clamp the value. The buttons disable automatically when you hit the minimum or maximum.

Stepper("Count", value: $count, in: 0...10)

Choose the Step Size

Add a step to change how much each tap moves the value, like jumping by five instead of one.

Stepper("Score", value: $count, in: 0...100, step: 5)

Show the Value

You usually want to display the current number. Interpolate it into the label so users see the count update.

Stepper("Items: \(count)", value: $count)

Custom Increment Actions

Need full control? Use the onIncrement and onDecrement closures to run your own logic on each tap.

Stepper("Adjust") {
    count += 2
} onDecrement: {
    count -= 2
}

Stepper in a Form

Drop a Stepper into a Form row for a tidy settings look, the same way Toggle and Slider fit there.

Form {
    Stepper("Servings", value: $count)
}

A Richer Label

The label can be any view via the closure form, so you can pair text with an icon for clarity.

Stepper(value: $count) {
    Label("Cups", systemImage: "cup.and.saucer")
}

React to Changes

Other views update automatically when the count changes. Here a Text repeats based on the value.

Text(String(repeating: "⭐️", count: count))

The Full View

Everything together: a clamped Stepper with a step plus a label that shows the live count.

struct CartView: View {
    @State private var count = 1
    var body: some View {
        Stepper("Qty: \(count)", value: $count, in: 1...9)
    }
}

Quick Check

What happens when a Stepper value reaches the top of its range?

Recap

A Stepper nudges a number with plus and minus, supports an in range and step, and clamps at the edges. ➕➖

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

บทเรียน “การเพิ่มค่าด้วย Stepper” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การเพิ่มค่าด้วย Stepper”

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

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

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

บทเรียน “การเพิ่มค่าด้วย Stepper” ใช้เวลานานแค่ไหน

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

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

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

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

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