SwiftUI Academy · Lekcja

Obrys, wypełnienie i overlay

Proszę obrysowywać i wypełniać kształty na potrzeby plakietek i kart.

Lekcja 4 z 413 kroki

Obrys, wypełnienie i overlay to bezpłatna lekcja SwiftUI Academy na CoddyKit. To lekcja 4 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.

Fill vs Stroke

A shape can be painted inside with fill or outlined with stroke. Together they let you build badges and cards.

Filling a Shape

Use fill to paint the whole inside of a shape with a color or gradient. It is the most common way to color a shape. 🎨

Circle()
    .fill(.blue)

Outlining with stroke

The stroke modifier draws only the border of a shape, leaving the center empty. Perfect for hollow rings and outlines.

Circle()
    .stroke(.blue)

Controlling Line Width

Pass a lineWidth to stroke to make the outline thicker or thinner. A larger number gives a bolder border.

Circle()
    .stroke(.blue, lineWidth: 4)

Dashed Borders

Use a StrokeStyle with a dash pattern for dashed outlines. Great for placeholders and drop zones in your UI.

RoundedRectangle(cornerRadius: 12)
    .stroke(style: StrokeStyle(lineWidth: 2, dash: [6]))

Fill and Stroke Together

Want both a fill and a border? Use fill with a stroke argument to paint inside and outline in one call.

Circle()
    .fill(.yellow)
    .stroke(.orange, lineWidth: 3)

Meet the overlay

The overlay modifier layers a view on top of another. Use it to add a border, badge, or icon over existing content.

Borders via overlay

A classic trick: fill a shape, then add a stroked copy with overlay. You get a clean filled card with a crisp border.

RoundedRectangle(cornerRadius: 12)
    .fill(.white)
    .overlay(
        RoundedRectangle(cornerRadius: 12)
            .stroke(.gray, lineWidth: 1))

Overlaying an Icon

You can overlay any view, not just shapes. Drop a small badge or icon onto a card to highlight new or important items.

Circle()
    .fill(.blue)
    .overlay(Text("3").foregroundStyle(.white))

overlay vs background

Remember the layers: overlay sits on top of a view, while background sits behind it. Pick by which side you want the decoration.

Building a Badge

Combine fill, stroke, and overlay to craft polished badges, avatars, and cards. These three tools cover most decoration. ✨

Quick Check

You want to layer a stroked border on top of a filled shape. Which modifier places a view on top?

Odpowiedz w interaktywnej lekcji

Recap: Stroke, Fill & overlay

You learned to paint shapes with fill, outline them with stroke, and layer extras with overlay. You can now build real badges and cards!

Bezpłatny start

Ucz się Swift dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 30
Lekcje: 120

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Obrys, wypełnienie i overlay” jest bezpłatna?

Tak — pełny tekst „Obrys, wypełnienie i overlay” 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 „Obrys, wypełnienie i overlay”?

Proszę obrysowywać i wypełniać kształty na potrzeby plakietek i kart. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Obrys, wypełnienie i overlay”?

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

← Powrót do SwiftUI Academy