PricingLoginStart free
SwiftUI Academy · Урок

Создание счетчика нажатий

Обновляйте состояние по нажатию и наблюдайте за обновлением интерфейса.

Урок 3 из 413 шагов

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

Цель: счётчик в реальном времени

Давайте создадим кнопку, которая считает Ваши нажатия и показывает общее число на экране. Это классическое первое знакомство с реактивным состоянием. 👆

Начните с состояния

Начните с одного свойства @State для хранения текущего общего числа. Назовём его count и установим равным нулю.

@State private var count = 0

Покажите счётчик

Отобразите значение с помощью представления текста. Благодаря интерполяции строк подпись всегда отражает текущее значение count.

Text("Taps: \(count)")

Добавьте кнопку

Разместите кнопку, действие которой увеличивает count на единицу. Замыкание выполняется каждый раз, когда Вы нажимаете кнопку.

Button("Tap me") {
    count += 1
}

Объедините их в стек

Сгруппируйте подпись и кнопку в VStack, чтобы они аккуратно располагались друг над другом. Теперь у Вас есть полноценный небольшой экран.

VStack {
    Text("Taps: \(count)")
    Button("Tap me") { count += 1 }
}

Понаблюдайте за циклом

Нажатие, изменение count, повторный запуск body в SwiftUI, обновление текста. Этот тесный цикл лежит в основе каждого реактивного экрана SwiftUI.

Полное представление

Вот всё, соединённое вместе: состояние, подпись и кнопка внутри одного представления.

struct CounterView: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("Taps: \(count)")
            Button("Tap me") { count += 1 }
        }
    }
}

Добавьте сброс

Вторая кнопка может снова установить count равным нулю. Сброс состояния — это всего лишь ещё одно присваивание, и интерфейс мгновенно ему следует.

Button("Reset") { count = 0 }

Форматируйте подпись

Вы можете изменять форму множественного числа или стиль текста в зависимости от count. Подпись является функцией состояния, поэтому любая добавленная логика остаётся синхронизированной.

Text(count == 1 ? "1 tap" : "\(count) taps")

Добавьте уменьшение

Добавьте кнопку с минусом, чтобы уменьшать счётчик. Только не забывайте поддерживать разумное значение, например не позволяйте ему опускаться ниже нуля.

Button("-") { if count > 0 { count -= 1 } }

Никакого ручного обновления

Обратите внимание: Вам не нужно вызывать какой-либо метод обновления. Достаточно изменить count — SwiftUI каждый раз сам выполняет перерисовку.

Быстрая проверка

Что заставляет текст обновиться после нажатия в счётчике нажатий?

Ответь в интерактивном уроке

Итоги

Вы создали счётчик нажатий с одним значением @State, текстом, который его читает, и кнопкой, которая его изменяет. Измените данные — и интерфейс обновится сам. 🎉

Можно начать бесплатно

Изучай Swift с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
30
Уроки
120
Начать учиться бесплатноПосмотреть полный курс

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

Урок «Создание счетчика нажатий» бесплатный?

Да — полный текст урока «Создание счетчика нажатий» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 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 — локальная установка не требуется.

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

  1. Зачем представлениям нужно состояние
  2. Объявление свойств @State
  3. Создание счетчика нажатий
  4. Переключение видимости с помощью состояния
← Назад к SwiftUI Academy