SwiftUI Academy · Aula

Criando um contador de toques

Atualize o estado ao tocar e observe a interface ser atualizada.

Aula 3 de 413 etapas

Criando um contador de toques é uma aula grátis de SwiftUI Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de SwiftUI Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de SwiftUI Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

The Goal: A Live Counter

Let's build a button that counts your taps and shows the total on screen. It is the classic first taste of reactive state. 👆

Start with State

Begin with a single @State property to hold the running total. We name it count and start it at zero.

@State private var count = 0

Show the Count

Display the value with a Text view. Using string interpolation, the label always mirrors the current count.

Text("Taps: \(count)")

Add the Button

Place a Button whose action increases the count by one. The closure runs each time you tap it.

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

Stack Them Together

Group the label and button in a VStack so they sit neatly one above the other. Now you have a complete tiny screen.

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

Watch the Loop

Tap, count changes, SwiftUI re-runs body, the Text updates. This tight cycle is the heart of every reactive SwiftUI screen.

The Full View

Here is everything wired together: state, a label, and a button living inside one view.

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

Add a Reset

A second button can set count back to zero. Resetting state is just another assignment, and the UI follows instantly.

Button("Reset") { count = 0 }

Format the Label

You can pluralize or style the text based on count. The label is a function of state, so any logic you add stays in sync.

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

Decrement Too

Add a minus button to count down. Just remember to keep the value sensible, for example never letting it drop below zero.

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

No Manual Refresh

Notice you never call any refresh method. Changing count is all it takes; SwiftUI handles the redraw for you every single time.

Quick Check

In the tap counter, what makes the Text update after a tap?

Recap

You built a tap counter with one @State value, a Text that reads it, and a Button that mutates it. Change the data and the UI updates itself. 🎉

Grátis para começar

Aprenda Swift com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos
30
Aulas
120

Perguntas Frequentes

A aula “Criando um contador de toques” é grátis?

Sim — o texto completo de “Criando um contador de toques” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de SwiftUI Academy, atualize para CoddyKit PRO. O curso de SwiftUI Academy inclui 4 aulas no total.

O que vou aprender em “Criando um contador de toques”?

Atualize o estado ao tocar e observe a interface ser atualizada. Você pratica SwiftUI Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar SwiftUI Academy?

Nenhuma experiência prévia é necessária. SwiftUI Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Criando um contador de toques”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de SwiftUI Academy?

Sim. Cada aula de SwiftUI Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Por que as visualizações precisam de estado
  2. Declarando propriedades @State
  3. Criando um contador de toques
  4. Alternando a visibilidade com estado
← Voltar para SwiftUI Academy