Фоны и радиус скругления
Применяйте цвета, градиенты и скругленные углы.
«Фоны и радиус скругления» — бесплатный урок SwiftUI Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения SwiftUI Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс SwiftUI Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
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.
Часто задаваемые вопросы
Урок «Фоны и радиус скругления» бесплатный?
Да — полный текст урока «Фоны и радиус скругления» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс SwiftUI Academy, подпишись на CoddyKit PRO. Курс SwiftUI Academy содержит 4 уроков всего.
Чему я научусь в уроке «Фоны и радиус скругления»?
Применяйте цвета, градиенты и скругленные углы. Ты практикуешь SwiftUI Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать SwiftUI Academy?
Предыдущий опыт не требуется. SwiftUI Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Фоны и радиус скругления»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке SwiftUI Academy?
Да. Каждый урок SwiftUI Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Добавление внутренних отступов
- Изменение размера представлений с помощью frame
- Фоны и радиус скругления
- Spacer и приоритет компоновки