Android Academy · Lekcja

Pierwszy composable

Utwórz i wyświetl podgląd funkcji composable

Pierwszy composable 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.

Pierwsza funkcja kompozycyjna

Funkcja kompozycyjna to po prostu funkcja Kotlin oznaczona adnotacją @Composable. Napiszmy funkcję, która powita użytkownika po imieniu.

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

Adnotacja @Composable

Adnotacja @Composable informuje kompilator, że funkcja może emitować interfejs użytkownika i wywoływać inne funkcje kompozycyjne. Bez niej nie można wywoływać funkcji Text, Button ani innych funkcji interfejsu.

Konwencja nazewnictwa

Funkcje kompozycyjne emitujące interfejs użytkownika nazywa się rzeczownikami zapisanymi w formacie PascalCase, na przykład Greeting lub ProfileCard — podobnie jak klasy. Sygnalizuje to, że funkcja „rysuje coś”, a nie „zwraca wartość”.

Parametry sterują interfejsem

Funkcja kompozycyjna przyjmuje parametry tak jak każda funkcja. Parametry te są jej danymi wejściowymi. Różne argumenty tworzą różny interfejs.

@Composable
fun Greeting(name: String) {
    Text(text = "Welcome, $name")
}
// Greeting("Sam") and Greeting("Mia") render different text

Wywoływanie funkcji kompozycyjnych

Funkcje kompozycyjne można wywoływać tylko z poziomu innych funkcji kompozycyjnych. Ekran tworzy się przez zagnieżdżanie wywołań.

@Composable
fun WelcomeScreen() {
    Greeting(name = "Ada")
    Greeting(name = "Grace")
}

Osadzanie za pomocą setContent

Aby rzeczywiście wyświetlać funkcje kompozycyjne, Activity wywołuje setContent { } w onCreate. Lambda jest korzeniem interfejsu Compose.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WelcomeScreen()
        }
    }
}

Funkcje kompozycyjne zwracają Unit

Proszę zauważyć, że funkcje kompozycyjne nie zwracają obiektu interfejsu. Ich typem zwracanym jest Unit, a interfejs jest emitowany jako efekt uboczny wywołania. Interfejs buduje się przez wywoływanie, a nie przez zwracanie wartości.

Parametry domyślne

Domyślne argumenty Kotlina świetnie się tu sprawdzają. Można nadać parametrowi wartość domyślną, aby osoby wywołujące funkcję mogły go pominąć.

@Composable
fun Greeting(name: String = "Guest") {
    Text(text = "Hello, $name!")
}
// Greeting() shows "Hello, Guest!"

Ponowne używanie funkcji kompozycyjnych

Ponieważ funkcje kompozycyjne są funkcjami, można ich ponownie używać. Zdefiniuj Greeting raz i wywołuj ją w dowolnym miejscu z różnymi imionami. W ten sposób unikniesz powielania kodu interfejsu.

Niech będą małe

Dobre funkcje kompozycyjne są małe i skoncentrowane. Jedna funkcja kompozycyjna powinna opisywać jeden logiczny fragment interfejsu. Większe ekrany twórz przez łączenie małych funkcji kompozycyjnych.

Połączenie wszystkich elementów

Oto kompletna pierwsza funkcja kompozycyjna podłączona do aktywności. Uruchomienie jej na urządzeniu wyświetli „Hello, Compose!”

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "Compose")
        }
    }
}

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

Szybkie sprawdzenie

Co umożliwia funkcji adnotacja @Composable?

Podsumowanie

Napisali Państwo pierwszą funkcję kompozycyjną. Proszę pamiętać:

Funkcje interfejsu oznaczaj adnotacją @Composable.
Używaj nazw w formacie PascalCase.
Parametry są danymi wejściowymi kształtującymi interfejs.
setContent { } osadza funkcje kompozycyjne w aktywności.

Często zadawane pytania

Czy lekcja „Pierwszy composable” jest bezpłatna?

Tak — pełny tekst „Pierwszy 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 „Pierwszy composable”?

Utwórz i wyświetl podgląd funkcji composable Ć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 „Pierwszy 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