0Pricing
SwiftUI Academy · Урок

Встроенные фигуры

Рисуйте Rectangle, Circle, Capsule и RoundedRectangle.

«Встроенные фигуры» — бесплатный урок SwiftUI Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения SwiftUI Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс SwiftUI Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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?

Recap: Built-in Shapes

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

Часто задаваемые вопросы

Урок «Встроенные фигуры» бесплатный?

Да — полный текст урока «Встроенные фигуры» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс SwiftUI Academy, подпишись на CoddyKit PRO. Курс SwiftUI Academy содержит 4 уроков всего.

Чему я научусь в уроке «Встроенные фигуры»?

Рисуйте Rectangle, Circle, Capsule и RoundedRectangle. Ты практикуешь SwiftUI Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать SwiftUI Academy?

Предыдущий опыт не требуется. SwiftUI Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Встроенные фигуры»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке SwiftUI Academy?

Да. Каждый урок SwiftUI Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Тип Color и цвета ресурсов
  2. Линейные, радиальные и угловые градиенты
  3. Встроенные фигуры
  4. Обводка, заливка и overlay
← Назад к SwiftUI Academy