Android Academy · Lekcja

Przyciski i kliknięcia

Doda Pan/Pani interaktywne przyciski.

Przyciski i kliknięcia to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 2 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 Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 4 lekcji w sumie.

Czym jest przycisk

Button to composable, którego można dotknąć. Po dotknięciu aplikacja wykonuje określony kod.

Przycisk potrzebuje działania onClick oraz treści do wyświetlenia, zwykle etykiety Text.

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

Lambda onClick

Parametr onClick przyjmuje lambdę, czyli kod umieszczony w nawiasach klamrowych { }. Ten kod jest wykonywany za każdym naciśnięciem przycisku.

Można umieścić w niej dowolną logikę, na przykład wypisywanie informacji lub zmianę danych.

Button(onClick = {
    println("Clicked!")
}) {
    Text("Click")
}

Zawartość przycisku

Zawartość wewnątrz końcowych nawiasów klamrowych ma zakres RowScope. Można w niej umieścić Text, Icons albo oba te elementy.

Większość przycisków zawiera tylko jedną etykietę Text opisującą działanie.

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

Liczenie kliknięć za pomocą stanu

Aby reagować na stuknięcia, przechowuj wartość za pomocą remember i mutableStateOf. Gdy wartość się zmieni, interfejs zostanie zaktualizowany.

W tym przykładzie każde stuknięcie zwiększa wartość count o jeden.

var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
    Text("Count: $count")
}

Wyłączanie przycisku

Parametr enabled określa, czy można stuknąć przycisk. Ustaw wartość false, aby wyszarzyć przycisk i zablokować kliknięcia.

Jest to przydatne, gdy formularz jest jeszcze niekompletny.

Button(
    onClick = { },
    enabled = false
) {
    Text("Locked")
}

OutlinedButton

OutlinedButton rysuje tylko obramowanie, bez wypełnienia. Działa tak samo, ale wygląda lżej.

Używaj go do drugorzędnych działań obok wyraźniejszego głównego przycisku Button.

OutlinedButton(onClick = { }) {
    Text("Cancel")
}

TextButton

TextButton wyświetla tylko etykietę, bez obramowania i wypełnienia. To najdelikatniejszy styl przycisku.

Dobrze sprawdza się w przypadku działań o małym znaczeniu, takich jak Skip lub Learn more.

TextButton(onClick = { }) {
    Text("Skip")
}

Kolory przycisków

Możesz zmienić kolor przycisku Button za pomocą ButtonDefaults.buttonColors, przekazując kolor tła w parametrze containerColor.

Wybieraj kolory pasujące do marki i zapewniające dobrą czytelność.

Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Green
    )
) {
    Text("Go")
}

IconButton

IconButton to mały, okrągły, reagujący na stuknięcia obszar przeznaczony dla pojedynczej ikony, takiej jak serce lub menu.

Nie ma etykiety, więc oszczędza miejsce na paskach narzędzi.

IconButton(onClick = { }) {
    Icon(Icons.Default.Favorite, contentDescription = "Like")
}

Nadawanie kształtu przyciskowi

Parametr shape zmienia wygląd narożników. Użyj RoundedCornerShape z wartością w dp, aby uzyskać bardziej zaokrąglone krawędzie.

Większe liczby tworzą łagodniejsze przyciski w kształcie kapsułki.

Button(
    onClick = { },
    shape = RoundedCornerShape(16.dp)
) {
    Text("Rounded")
}

Nazywanie funkcji kliknięć

Aby kod był uporządkowany, przekaż do onClick nazwaną funkcję zamiast umieszczać logikę bezpośrednio w kodzie. Dzięki temu interfejs pozostaje czytelny.

Przekaż referencję do funkcji albo wywołaj ją wewnątrz lambdy.

fun onSave() { println("Saved") }
Button(onClick = { onSave() }) {
    Text("Save")
}

Szybkie sprawdzenie

Sprawdź, czy rozumiesz działanie przycisków.

Podsumowanie

Dowiedziałeś się, że Button używa onClick do określenia działania, a bloku content do wyświetlenia etykiety. Stan przechowywany za pomocą remember pozwala zmieniać interfejs po kliknięciach.

Poznałeś także OutlinedButton, TextButton i IconButton oraz dowiedziałeś się, jak ustawiać enabled, kolory i shape.

Teraz zajmiesz się kontrolowaniem odstępów za pomocą padding.

Często zadawane pytania

Czy lekcja „Przyciski i kliknięcia” jest bezpłatna?

Tak — pełny tekst „Przyciski i kliknięcia” 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 Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Przyciski i kliknięcia”?

Doda Pan/Pani interaktywne przyciski. Ćwiczysz Android 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ąć Android Academy?

Nie wymagamy żadnego doświadczenia. Android 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 2 z 4.

Ile czasu zajmuje lekcja „Przyciski i kliknięcia”?

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 Android Academy?

Tak. Każda lekcja Android 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 Android Academy