SwiftUI Academy · Lección

Creación de un botón pulsable

Cree un Button con una etiqueta y una acción.

Creación de un botón pulsable es una lección gratuita de SwiftUI Academy en CoddyKit. Esta es la lección 1 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.

Why Buttons Matter

Most apps come alive when you tap something. A Button is the simplest way to let people trigger an action in SwiftUI. 👆

The Button View

A Button is just a view, like Text or Image. You place it in your body and SwiftUI draws a tappable control for you.

Button("Tap me") {
    print("Tapped!")
}

Two Parts of a Button

Every button has two parts: a label that you see, and an action that runs when you tap it. Both are required.

The Simple Title Form

The quickest button takes a title string first and the action closure second. SwiftUI turns the string into a Text label for you.

Button("Save") {
    saveDocument()
}

The Action Closure

The braces hold the action closure. Whatever code you write inside runs once each time the button is tapped, and not before.

Button("Greet") {
    print("Hello there")
}

A Custom Label

Need more than text? Use the label form: pass an action, then a closure that returns any view you like for the look.

Button {
    likePost()
} label: {
    Image(systemName: "heart")
}

Labels Can Be Rich

Because the label is a view, you can combine an icon and text together inside a stack for a friendlier, clearer tappable area.

Button {
    addItem()
} label: {
    Label("Add", systemImage: "plus")
}

Buttons Live in the Body

A button goes inside your view's body, just like any other view. SwiftUI handles drawing it and listening for taps automatically.

var body: some View {
    Button("Continue") {
        goNext()
    }
}

The Tap Target

The whole label area is tappable, so a bigger label is easier to hit. Apple suggests a comfortable tap target of about 44 points.

Calling a Function on Tap

Keep the closure tidy by calling a function instead of cramming logic inline. The action just points to the work you defined elsewhere.

Button("Refresh") {
    reloadData()
}

No Tap, No Action

The action does not run when the screen loads. It waits patiently and only fires on tap, which keeps your view predictable.

Quick Check

Let's make sure the button basics clicked.

Recap

Nice work! A Button pairs a label you see with an action that runs on tap. Use the simple title form or a custom label view. ✨

Preguntas frecuentes

¿La lección «Creación de un botón pulsable» es gratis?

Sí — el texto completo de «Creación de un botón pulsable» 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 «Creación de un botón pulsable»?

Cree un Button con una etiqueta y una acción. 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 1 de 4.

¿Cuánto tiempo toma la lección «Creación de un botón pulsable»?

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