Tła i promień zaokrąglenia
Proszę stosować kolory, gradienty i zaokrąglone narożniki.
Tła i promień zaokrąglenia to bezpłatna lekcja SwiftUI Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej SwiftUI Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs SwiftUI Academy zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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.
Często zadawane pytania
Czy lekcja „Tła i promień zaokrąglenia” jest bezpłatna?
Tak — pełny tekst „Tła i promień zaokrąglenia” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu SwiftUI Academy, przejdź na CoddyKit PRO. Kurs SwiftUI Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Tła i promień zaokrąglenia”?
Proszę stosować kolory, gradienty i zaokrąglone narożniki. Ćwiczysz SwiftUI Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć SwiftUI Academy?
Nie wymagamy żadnego doświadczenia. SwiftUI Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Tła i promień zaokrąglenia”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji SwiftUI Academy?
Tak. Każda lekcja SwiftUI Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Dodawanie marginesów wokół widoków
- Ustalanie rozmiaru widoków za pomocą frame
- Tła i promień zaokrąglenia
- Spacer i priorytet układu