Presentar una Sheet
Muestre una vista modal con sheet y un binding.
Presentar una Sheet 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.
What Is a Sheet?
A sheet is a card that slides up from the bottom to show extra content, like a form or detail, without leaving your current screen. 📄
Sheets Need a Trigger
A sheet appears when a boolean state flips to true. You store that flag in your view and flip it when the user taps something.
@State private var showSheet = falseThe .sheet Modifier
You attach .sheet to a view and bind it to your boolean. When the value is true, SwiftUI presents the content you return.
.sheet(isPresented: $showSheet) {
Text("Hello from the sheet!")
}The Dollar Sign Binding
The $ before showSheet passes a two-way binding, so SwiftUI can both read the flag and reset it to false when the sheet closes.
.sheet(isPresented: $showSheet) { DetailView() }Opening the Sheet
Set the boolean to true from a button action and the sheet animates up automatically. You never call a present function yourself. ✨
Button("Show Details") {
showSheet = true
}Putting It Together
Combine the button, the state, and the .sheet modifier on one view and you have a working modal in just a few lines.
Button("Open") { showSheet = true }
.sheet(isPresented: $showSheet) {
Text("Sheet content")
}Dismissing a Sheet
Users can swipe a sheet down to close it. To dismiss it in code, read the dismiss action from the environment inside the sheet.
@Environment(\.dismiss) private var dismissCalling dismiss()
Give the sheet a Done button that calls dismiss(). This is the polite way to let users finish and return to the main screen.
Button("Done") { dismiss() }Sheets Get Their Own State
A sheet is a normal SwiftUI view, so it can hold its own state, modifiers, and even another sheet. Treat it like any other screen.
Presenting With an Item
Use sheet(item:) when the sheet depends on a selected value. SwiftUI shows the sheet whenever that optional item is non-nil.
.sheet(item: $selectedBook) { book in
BookDetail(book: book)
}One Sheet at a Time
A view shows one sheet per modifier. For several modals, use separate flags or item bindings so they never collide on screen.
Quick Check
How do you tell SwiftUI to present a sheet?
Recap: Sheets
You learned that a sheet slides up from a boolean flag, attaches with .sheet, and closes via swipe or the dismiss action. Nice work! 🎉
Preguntas frecuentes
¿La lección «Presentar una Sheet» es gratis?
Sí — el texto completo de «Presentar una Sheet» 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 «Presentar una Sheet»?
Muestre una vista modal con sheet y un binding. 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 «Presentar una Sheet»?
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.