SwiftUI Academy · Lección

Fondos y radio de esquina

Aplique colores, degradados y esquinas redondeadas.

Fondos y radio de esquina 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.

Adding a Background

The background modifier paints behind a view. Drop in a color and the area the view occupies fills in, instantly turning plain text into a tile.

Text("Hello")
    .background(.blue)

Pad First, Then Color

A background hugs the content tightly. Add padding before the background so the color has comfortable space around the text inside.

Text("Pill")
    .padding()
    .background(.blue)

Readable Text on Color

Dark backgrounds need light text. Pair a colored background with foregroundStyle so your label stays crisp and easy to read.

Text("Tag")
    .padding()
    .background(.indigo)
    .foregroundStyle(.white)

Rounding the Corners

Sharp corners can feel harsh. The cornerRadius modifier softens them, clipping the view into a friendly rounded rectangle.

Text("Soft")
    .padding()
    .background(.blue)
    .cornerRadius(12)

Order Makes the Shape

Corner radius rounds whatever it follows, so place it after the background. Rounding before the color would clip the text, not the tile.

Background with a Shape

For more control, pass a shape to background. A RoundedRectangle fills and rounds in one step, the modern way to build cards.

Text("Card")
    .padding()
    .background(RoundedRectangle(cornerRadius: 16).fill(.teal))

Making a Circle

A large radius on a square view yields a circle. Combine an equal frame with clipShape using Circle for round avatars and icon badges.

Text("A")
    .frame(width: 60, height: 60)
    .background(.orange)
    .clipShape(Circle())

Gradients as Backgrounds

Backgrounds are not limited to flat colors. A LinearGradient adds depth, flowing smoothly from one color to another across the view.

Text("Glow")
    .padding()
    .background(LinearGradient(colors: [.pink, .orange], startPoint: .top, endPoint: .bottom))

Materials for Depth

SwiftUI ships translucent Material backgrounds that blur whatever sits behind them, giving cards a native, frosted-glass feel.

Text("Frosted")
    .padding()
    .background(.ultraThinMaterial)

Adding a Border

Pair a background with an overlay stroke to outline a card. The rounded rectangle border traces the same corners as the fill.

Text("Bordered")
    .padding()
    .overlay(RoundedRectangle(cornerRadius: 12).stroke(.gray))

Building a Real Card

Stack these tools and a card appears: padding for room, a background for color, and a corner radius to round it into a polished tile.

Text("Done")
    .padding()
    .background(.green)
    .cornerRadius(10)

Quick Check

Make sure the modifier order clicked for you.

Recap

Awesome! You can now style views with a background, round corners, add gradients, materials, and borders to build clean, reusable cards.

Preguntas frecuentes

¿La lección «Fondos y radio de esquina» es gratis?

Sí — el texto completo de «Fondos y radio de esquina» 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 «Fondos y radio de esquina»?

Aplique colores, degradados y esquinas redondeadas. 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 «Fondos y radio de esquina»?

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