Android Academy · Lekcja

Czym jest Composable

Funkcje opisujące interfejs użytkownika.

Czym jest Composable to bezpłatna lekcja Android 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 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 funkcja composable

W Jetpack Compose budujesz ekrany, zapisując funkcje, a nie wczytując układy XML. Composable to po prostu funkcja Kotlin opisująca fragment interfejsu użytkownika.

Taką funkcję oznaczasz adnotacją @Composable. Informuje to kompilator Compose, że funkcja może emitować interfejs użytkownika i wywoływać inne funkcje composable.

Adnotacja @Composable

Dodanie @Composable nad funkcją odblokowuje możliwości Compose. W jej wnętrzu możesz wywoływać inne funkcje composable, takie jak Text czy Column.

Zgodnie z konwencją nazwy funkcji composable zaczynają się wielką literą, tak jak nazwy klas. Dzięki temu łatwo rozpoznać funkcje interfejsu użytkownika w kodzie.

@Composable
fun Greeting() {
    Text("Hello, Compose!")
}

Interfejs użytkownika opisany w Kotlinie

Funkcja composable nie zwraca obiektu View. Zamiast tego emituje interfejs użytkownika jako efekt uboczny podczas jej wykonywania przez Compose. Po prostu opisujesz, co powinno pojawić się na ekranie.

Nazywa się to stylem deklaratywnym: określasz wygląd interfejsu dla bieżących danych, a Compose ustala, jak go narysować.

@Composable
fun WelcomeMessage() {
    Text("Welcome back!")
}

Funkcje composable wywołują inne funkcje composable

Prawdziwa siła tkwi w zagnieżdżaniu. Funkcja composable może wywoływać inne funkcje composable, dzięki czemu możesz budować złożone ekrany z małych, wielokrotnie używanych elementów.

Tutaj nadrzędna funkcja composable wywołuje podrzędną funkcję composable. Compose wykonuje je od góry do dołu i układa wyemitowany interfejs.

@Composable
fun Header() {
    Text("My App")
}

@Composable
fun Screen() {
    Header()
}

Funkcje bez wartości zwracanej

Większość funkcji composable zwraca Unit, co oznacza, że nie zwraca użytecznej wartości. Ich zadaniem jest emitowanie interfejsu użytkownika, a nie przekazywanie wartości.

Wywołujesz więc funkcję composable ze względu na jej wpływ na ekran, a nie po to, aby przechwycić wynik. Różni się to od zwykłych funkcji, ale szybko staje się naturalne.

@Composable
fun Footer() {
    Text("\u00A9 2024 CoddyKit")
}

Przekazywanie danych jako parametrów

Funkcje composable mogą przyjmować parametry, tak jak zwykłe funkcje Kotlin. Dzięki temu ta sama funkcja composable może wyświetlać różne dane.

Tutaj Greeting przyjmuje name i wyświetla tę wartość. Przekazywanie danych sprawia, że funkcje composable są elastyczne i można ich używać ponownie w całej aplikacji.

@Composable
fun Greeting(name: String) {
    Text("Hello, " + name + "!")
}

Ponowne używanie funkcji composable

Ponieważ funkcje composable są funkcjami, możesz wywoływać je wiele razy z różnymi argumentami. Każde wywołanie emituje własną kopię interfejsu użytkownika.

W ten sposób unikasz powtarzania kodu: tworzysz interfejs raz, a potem używasz go ponownie wszędzie tam, gdzie jest potrzebny.

@Composable
fun NameList() {
    Greeting("Ada")
    Greeting("Linus")
}

Gdzie umieszcza się funkcje composable

Funkcje composable umieszczasz w aktywności Androida za pomocą setContent. Ten blok jest punktem wejścia, w którym Compose przejmuje kontrolę nad ekranem.

Wewnątrz setContent wywołujesz funkcję composable najwyższego poziomu, a wszystko, co emituje, staje się interfejsem użytkownika aplikacji.

setContent {
    Greeting("World")
}

Podstawy rekompozycji

Gdy zmienią się dane odczytywane przez funkcję composable, Compose uruchamia tę funkcję ponownie, aby zaktualizować ekran. To ponowne uruchomienie nazywa się rekompozycją.

Nie musisz ręcznie aktualizować interfejsu. Zmieniasz dane, a Compose automatycznie wykonuje rekompozycję funkcji composable, których to dotyczy. Dzięki temu ekran pozostaje zgodny ze stanem.

Twórz małe funkcje composable

Dobrym nawykiem jest przypisywanie każdej funkcji composable jednego jasno określonego zadania. Małe, skoncentrowane funkcje composable łatwiej czytać, testować i ponownie wykorzystywać.

Jeśli funkcja staje się zbyt duża, podziel ją na mniejsze funkcje composable i wywołuj je razem. W przyszłości sobie za to podziękujesz.

@Composable
fun ProfileHeader(name: String) {
    Text(name)
}

Importy, które zobaczysz

Funkcje composable pochodzą z bibliotek Compose. Często importuje się androidx.compose.runtime.Composable dla adnotacji oraz androidx.compose.material3.Text dla tekstu.

Android Studio zwykle dodaje te importy za Ciebie. Wiedza o ich pochodzeniu pomaga, gdy brakuje importu.

import androidx.compose.runtime.Composable
import androidx.compose.material3.Text

Szybkie sprawdzenie

Przypomnijmy sobie, co sprawia, że funkcja jest funkcją composable.

Podsumowanie

Dowiedziałeś się, że funkcja composable to funkcja Kotlin oznaczona @Composable, która deklaratywnie opisuje interfejs użytkownika. Funkcje composable mogą przyjmować parametry, wywoływać inne funkcje composable, a ich nazwy zaczynają się wielką literą.

Zwracają Unit i emitują interfejs użytkownika zamiast zwracać wartość. Gdy dane się zmieniają, Compose wykonuje ich rekompozycję, aby zaktualizować ekran. Następnie wyświetlisz prawdziwy tekst i ułożysz widoki jeden pod drugim za pomocą Column.

Często zadawane pytania

Czy lekcja „Czym jest Composable” jest bezpłatna?

Tak — pełny tekst „Czym jest Composable” 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 „Czym jest Composable”?

Funkcje opisujące interfejs użytkownika. Ć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 1 z 4.

Ile czasu zajmuje lekcja „Czym jest Composable”?

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