SwiftUI Academy · Lección

Incremento con Stepper

Ajuste los valores hacia arriba y hacia abajo con un stepper.

Incremento con Stepper es una lección gratuita de SwiftUI Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de SwiftUI Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de SwiftUI Academy incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

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. ➕➖

Preguntas frecuentes

¿La lección «Incremento con Stepper» es gratis?

Sí — el texto completo de «Incremento con Stepper» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de SwiftUI Academy, actualiza a CoddyKit PRO. El curso de SwiftUI Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Incremento con Stepper»?

Ajuste los valores hacia arriba y hacia abajo con un stepper. Practicas SwiftUI Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar SwiftUI Academy?

No se requiere experiencia previa. SwiftUI Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Incremento con Stepper»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de SwiftUI Academy?

Sí. Cada lección de SwiftUI Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a SwiftUI Academy