SwiftUI Academy · Lekcja

Wbudowane kształty

Proszę rysować Rectangle, Circle, Capsule i RoundedRectangle.

Lekcja 3 z 413 kroki

Wbudowane kształty 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.

Shapes Are Views

SwiftUI gives you ready-made shapes you can drop in like any view. They draw themselves and fill the space you give them. 🔷

The Rectangle

A Rectangle is the simplest shape: a plain box. It expands to fill whatever frame or container holds it.

Rectangle()
    .fill(.blue)
    .frame(width: 120, height: 60)

The Circle

A Circle always draws a perfect round shape inside its frame. Give it a square frame for a clean, even circle.

Circle()
    .fill(.green)
    .frame(width: 80, height: 80)

The Capsule

A Capsule is a pill shape with fully rounded ends. It is the go-to look for tags, chips, and buttons.

Capsule()
    .fill(.orange)
    .frame(width: 120, height: 44)

RoundedRectangle

A RoundedRectangle is a box with softened corners. Set its corner radius to control how round those corners look.

RoundedRectangle(cornerRadius: 16)
    .fill(.purple)

Filling a Shape

Use fill to paint a shape with a solid color or even a gradient. Without a fill, a shape draws in the default style.

Circle()
    .fill(Color.pink.gradient)

Sizing with frame

Shapes have no natural size, so wrap them in a frame to set width and height. The shape grows to fit it.

Rectangle()
    .frame(width: 100, height: 100)

Ellipse for Ovals

An Ellipse stretches a circle to match its frame. In a wide frame it becomes a smooth oval rather than a round circle.

Ellipse()
    .fill(.teal)
    .frame(width: 140, height: 70)

Shapes as Backgrounds

Place a shape behind content with the background modifier to build cards and badges. Content sits neatly on top.

Text("New")
    .padding(8)
    .background(Capsule().fill(.red))

Clipping to a Shape

Use clipShape to crop an image or view into a shape. A square photo becomes a perfect round avatar.

Image("avatar")
    .clipShape(Circle())

Shapes Build UI

Combined with fills and frames, these shapes become buttons, cards, badges, and avatars. They are your visual toolkit. ✨

Quick Check

You want a pill-shaped tag with fully rounded ends. Which shape fits best?

Odpowiedz w interaktywnej lekcji

Recap: Built-in Shapes

You can now draw Rectangle, Circle, Capsule, RoundedRectangle, and Ellipse, then fill and size them. Great progress!

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 „Wbudowane kształty” jest bezpłatna?

Tak — pełny tekst „Wbudowane kształty” 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 „Wbudowane kształty”?

Proszę rysować Rectangle, Circle, Capsule i RoundedRectangle. Ć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 „Wbudowane kształty”?

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