Planos de fundo e raio dos cantos
Aplique cores, gradientes e cantos arredondados.
Planos de fundo e raio dos cantos é uma aula grátis de SwiftUI Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de SwiftUI Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de SwiftUI Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em 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.
Perguntas Frequentes
A aula “Planos de fundo e raio dos cantos” é grátis?
Sim — o texto completo de “Planos de fundo e raio dos cantos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de SwiftUI Academy, atualize para CoddyKit PRO. O curso de SwiftUI Academy inclui 4 aulas no total.
O que vou aprender em “Planos de fundo e raio dos cantos”?
Aplique cores, gradientes e cantos arredondados. Você pratica SwiftUI Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar SwiftUI Academy?
Nenhuma experiência prévia é necessária. SwiftUI Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Planos de fundo e raio dos cantos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de SwiftUI Academy?
Sim. Cada aula de SwiftUI Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Adicionando preenchimento ao redor das visualizações
- Dimensionando visualizações com frame
- Planos de fundo e raio dos cantos
- Spacer e prioridade de layout