0Pricing
Jetpack Compose Academy · Lekcja

Tworzenie licznika dotknięć

Połącz stan z przyciskiem, aby uzyskać aktualizacje na żywo

Tworzenie licznika dotknięć to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Jetpack Compose Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

Our Goal

Let's build a tiny tap counter: a number on screen and a button that increases it with every tap. 🙂

Start With the State

First declare the state that will change. The counter starts at zero and lives inside the Composable for now.

var count by remember { mutableStateOf(0) }

Show the Count

Read the state in a Text so it always displays the current value. Reading it here subscribes the Text to changes.

Text("Count: " + count)

Add the Button

A Button needs an onClick action. Inside it we will change the state, which is what makes the UI react.

Button(onClick = { }) {
    Text("Tap me")
}

Increment on Tap

In onClick, bump the counter. Changing the state tells Compose to recompose anything that reads count.

Button(onClick = { count++ }) {
    Text("Tap me")
}

Stack Them in a Column

Place the text above the button using a Column, which lays out its children vertically, top to bottom.

Column {
    Text("Count: " + count)
    Button(onClick = { count++ }) { Text("Tap me") }
}

How the Loop Works

Tap fires onClick, count changes, Compose recomposes the Text, and you instantly see the new number. That is the full cycle.

Add a Reset Button

Want a fresh start? Add a second button whose onClick sets count back to zero. Reset is just another state change.

Button(onClick = { count = 0 }) {
    Text("Reset")
}

React to the Value

Because the UI is a function of state, you can style it from count, like showing a message once it passes ten taps.

if (count > 10) Text("Wow, keep going!")

Wrap It in a Function

Put everything in a reusable Composable named TapCounter. Now you can drop your counter anywhere in the app.

@Composable
fun TapCounter() {
    var count by remember { mutableStateOf(0) }
}

You Built Interactivity

That simple loop of state to UI to event to state is the heart of every interactive Compose screen you will ever write.

Quick Check

What makes the displayed number update after a tap?

Recap

You wired state to a Text and a Button to build a live tap counter, your first truly interactive Compose screen. Great work! 🎉

Często zadawane pytania

Czy lekcja „Tworzenie licznika dotknięć” jest bezpłatna?

Tak — pełny tekst „Tworzenie licznika dotknięć” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Jetpack Compose Academy, przejdź na CoddyKit PRO. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Tworzenie licznika dotknięć”?

Połącz stan z przyciskiem, aby uzyskać aktualizacje na żywo Ćwiczysz Jetpack Compose Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Jetpack Compose Academy?

Nie wymagamy żadnego doświadczenia. Jetpack Compose Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Tworzenie licznika dotknięć”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Jetpack Compose Academy?

Tak. Każda lekcja Jetpack Compose Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. remember i mutableStateOf
  2. Rekompozycja: co wywołuje ponowne rysowanie
  3. Tworzenie licznika dotknięć
  4. rememberSaveable podczas obracania ekranu
← Powrót do Jetpack Compose Academy