Фоны

Часть раздела Введение в SwiftUI путешествия по Swift на Coddy. Урок 15 из 50.

.background рисует цвет позади представления. Он покрывает область представления, поэтому отступы делают цветную область больше текста:

Text("New")
    .padding()
    .background(.red)
    .foregroundStyle(.white)

Чтобы скруглить углы цветной области, обрежьте её по форме с помощью .clipShape. RoundedRectangle(cornerRadius: 8) создаёт скруглённые углы, а Capsule() — полностью круглые концы:

Text("Tag")
    .padding(8)
    .background(.blue)
    .clipShape(RoundedRectangle(cornerRadius: 8))

Задание

Легко

Преврати текст в бейдж: добавь стандартные отступы, красный фон и белые буквы.

Попробуйте сами

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Введение в SwiftUI

1Введение

Что такое SwiftUI Файл приложения

4Модификаторы

Внутренние отступыФоныПорядок модификаторов Рамки и формы Повторение — создание значка

7Списки

ForEach Идентифицируемые элементы Список Добавление элементов Повторение — список покупок

10Проект — Coddy Coffee

Обзор проекта Экраны напитков

Выбор размера

Количество и итоговая сумма

Оформление заказа

2Отображение содержимого

Текстовые представления Числа в тексте Шрифты Цвета SF Symbols Повторение — ценник

5Состояние и кнопки

Кнопки Свойство @State Состояние «истина или ложь»Условные представления Повторение — счётчик очков

8Навигация

NavigationStack NavigationLink Передача данных Листы и оповещения Повторение — справочник растений

11Финальные задания

Калькулятор чаевых Список дел Игра «Правда или ложь»

3Стеки и компоновка

VStack HStack Выравнивание и интервалы Spacer и ZStack Повторение — карточка погоды

6Ввод данных пользователем

Текстовое поле Переключатель Счётчик и ползунок Выбор Повторение — форма заказа

9Обмен данными

Свойство @Binding Наблюдаемые объекты Объекты окружения Повторение — счётчик шагов

Потренируйтесь самостоятельно: Песочница Swift