Jetpack Compose Academy · Lekcja

Button i onClick

Uruchamiaj kod po dotknięciu przez użytkownika

Button i onClick to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 1 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.

Tap, Then React

A button is your app's simplest conversation: the user taps, your code runs. In Compose you express this with the Button composable. 👆

The Button Composable

A Button needs two things: an onClick action and some content to show, usually a Text label inside its trailing lambda.

Button(onClick = { /* do work */ }) {
    Text("Tap me")
}

onClick Runs on Tap

The onClick lambda runs once each time the button is pressed. Put any plain Kotlin code you want there, like updating a value.

Button(onClick = { count = count + 1 }) {
    Text("Add one")
}

Content Is a Lambda

Everything between the button's braces is its content. You are not limited to text; any composable can live inside that slot.

Button(onClick = { send() }) {
    Text("Send now")
}

Wire Up Real State

onClick really shines with state: change a value there and the UI redraws to match the new value automatically.

var liked by remember { mutableStateOf(false) }
Button(onClick = { liked = !liked }) {
    Text(if (liked) "Liked" else "Like")
}

Call a Function

For tidy code, point onClick at a named function instead of inlining logic. Your UI stays readable and the logic stays testable.

Button(onClick = ::saveProfile) {
    Text("Save")
}

Buttons Look Filled by Default

A plain Button renders as a filled, high-emphasis button: solid background, contrasting label. It signals the main action on a screen.

One Primary Action

Reserve the filled Button for the single most important action, like Submit or Continue. Too many filled buttons compete for attention.

Empty onClick Does Nothing

An empty onClick lambda compiles fine and the button still ripples, but nothing happens. Always wire it to real behavior. 🤔

Button(onClick = { }) {
    Text("Does nothing yet")
}

Pass a Modifier

Like most composables, Button accepts a modifier so you can size, pad, or space it within its parent layout.

Button(
    onClick = { go() },
    modifier = Modifier.fillMaxWidth()
) { Text("Continue") }

Tap to Confirm

Think of onClick as the moment of commitment: the user has decided. Use it to save, navigate, or trigger the work they asked for.

Quick Check

You wrote a Button but tapping it does nothing.

Recap: Tap Into Action

You met the Button composable: an onClick lambda for behavior plus a content lambda for its label. Tap, run code, update state. 🎉

Często zadawane pytania

Czy lekcja „Button i onClick” jest bezpłatna?

Tak — pełny tekst „Button i onClick” 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 „Button i onClick”?

Uruchamiaj kod po dotknięciu przez użytkownika Ć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 1 z 4.

Ile czasu zajmuje lekcja „Button i onClick”?

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

← Powrót do Jetpack Compose Academy