@Composable: co to je, anotace Compose a oblast použití

Co je @Composable v Jetpack Compose

@Composable — je anotace jazyka Kotlin, která označuje funkci jako určenou pro popis uživatelského rozhraní v rámci Jetpack Compose. Když kompilátor Kotlinu narazí na tuto anotaci, generuje další kód, který umožňuje funkci pracovat v kontextu kompozice — systému správy stromu UI.

Anotace @Composable byla představena společností Google v roce 2021 spolu s první stabilní verzí Jetpack Compose 1.0. Před jejím příchodem se vývoj rozhraní pro Android prováděl výhradně prostřednictvím značek XML a systému View. @Composable radikálně změnila přístup: místo popisu UI v samostatném souboru se značkami píše programátor rozhraní přímo v Kotlinu.

Hlavní rozdíl mezi @Composable a běžnými funkcemi Kotlin — schopnost číst a reagovat na změny stavu. Když proměnná, kterou Composable funkce čte, změní hodnotu, systém automaticky naplánuje restart (rekompozici) této funkce. To zbavuje programátora ruční aktualizace UI prostřednictvím findViewById a setText.

Vnitřní mechanika @Composable se opírá o koncept slotu — speciální oblasti paměti, která je přidělena každé funkci v rámci kompozice. V tomto slotu jsou uloženy hodnoty předané funkci, stejně jako servisní informace potřebné pro porovnání při následných voláních.

Jak deklarovat Composable funkci

Pro deklaraci Composable funkce stačí přidat anotaci @Composable před klíčové slovo fun. Funkce musí být v balíčku, který importuje anotaci z androidx.compose.runtime. Název funkce se doporučuje psát velkým písmenem — to je všeobecně přijatá konvence v komunitě Compose, která vizuálně odlišuje UI komponenty od běžných funkcí.

import androidx.compose.runtime.Composable

@Composable
fun Greeting(name: String) {
    var count by remember { mutableStateOf(0) }
    Column {
        Text("Ahoj, $name!")
        Button(onClick = { count++ }) {
            Text("Kliknuto $count krát")
        }
    }
}

Parametry Composable funkce mohou být jakékoli — primitivní typy, řetězce, lambdy a dokonce i jiné Composable funkce předávané prostřednictvím Slot API. Doporučuje se dělat parametry neměnné (val), aby se předešlo vedlejším účinkům při rekompozici. Všechna měnitelná data by měla být spravována pomocí mechanismů stavu Compose.

Composable funkce nemohou vrátit libovolnou hodnotu jako běžné funkce — jejich jediným úkolem je vytvořit nebo aktualizovat část stromu UI. Existují však speciální vzory jako State Hoisting, při kterém Compose funkce přijímá stav a callbacky prostřednictvím parametrů a zůstává čistá a znovupoužitelná.

Pravidla Composable funkcí v Kotlinu

Systém Compose ukládá několik přísných omezení na to, jak mají Composable funkce vypadat a chovat se. První pravidlo: Composable funkce může volat pouze jiné Composable funkce nebo běžné funkce bez vedlejších účinků. To zajišťuje předvídatelnost kompozice a správnou funkci optimalizací Compose.

Druhé pravidlo se týká pořadí provádění. Compose má právo volat Composable funkce v libovolném pořadí, proto kód v těle takové funkce nesmí spoléhat na pořadí volání sousedních funkcí. Každá Composable funkce by měla být soběstačná na úrovni své pozice ve stromu UI.

Třetí pravidlo — zákaz vedlejších účinků uvnitř samotného těla Composable funkce. Operace jako zápis do databáze, odesílání síťových požadavků nebo změna vnějších proměnných musí být prováděny pouze uvnitř speciálních efektů LaunchedEffect, DisposableEffect nebo SideEffect. Porušení tohoto pravidla vede k nepředvídatelnému chování při rekompozicích.

Čtvrté pravidlo: Composable funkce by měly být idempotentní. Opakované volání se stejnouými argumenty by mělo produkovat stejné UI. Tento požadavek je nezbytný pro správnou funkci optimalizace přeskakování, při které Compose přeskakuje překreslování funkcí, jejichž vstupní data se nezměnila.

// Správně: čistá Composable funkce bez vedlejších účinků
@Composable
fun UserCard(user: User, onClick: () -> Unit) {
    Card(modifier = Modifier.clickable { onClick() }) {
        Text(text = user.name)
    }
}

// Špatně: vedlejší účinek uvnitř těla
@Composable
fun WrongCard(userId: String) {
    // val result = viewModel.loadUser(userId)  // NENÍ POVOLENO
    Text("Načítání...")
}

Příklady použití @Composable

Podívejme se na praktický příklad vytvoření obrazovky profilu s použitím anotace @Composable. Zde demonstrujeme kombinování více Composable funkcí, práci se stavem a modifikátory — klíčovémi prvky každého rozvržení Compose.

@Composable
fun ProfileScreen(userId: String) {
    var isFollowed by remember { mutableStateOf(false) }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        ProfileHeader(userId = userId)
        Spacer(modifier = Modifier.height(16.dp))
        StatsRow(posts = 42, followers = 1280)
        Spacer(modifier = Modifier.height(24.dp))
        FollowButton(
            isFollowed = isFollowed,
            onToggle = { isFollowed = !isFollowed }
        )
    }
}

@Composable
fun ProfileHeader(userId: String) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        AsyncImage(model = "https://example.com/avatars/$userId",
            contentDescription = "User avatar")
        Spacer(modifier = Modifier.width(12.dp))
        Text(text = "Uživatel #$userId", style = MaterialTheme.typography.headlineMedium)
    }
}

@Composable
fun StatsRow(posts: Int, followers: Int) {
    Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
        StatItem("Posts", posts)
        StatItem("Followers", followers)
    }
}

@Composable
fun StatItem(label: String, value: Int) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "$value", style = MaterialTheme.typography.headlineSmall)
        Text(text = label, style = MaterialTheme.typography.bodySmall)
    }
}

V příkladu je každá Composable funkce odpovědná za svou část obrazovky: ProfileScreen spravuje celkový stav a kompozici dceřiných funkcí, ProfileHeader zobrazuje avatar a jméno a StatsRow — blok se statistikami. Tento přístup se řídí principem jedné odpovědnosti a zjednodušuje znovupoužitelnost komponent.

Typy Composable funkcí a jejich účel

V Jetpack Compose existují tři hlavní typy Composable funkcí. První typ — kontejnery (Row, Column, Box, LazyColumn), které určují umístění dceřiných prvků. Druhý — zobrazovací prvky (Text, Image, Icon, Button), které vykreslují konkrétní UI komponenty. Třetí — vlastní Composable funkce, které kombinují vestavěné komponenty do znovupoužitelných bloků.

Kontejnery se liší od běžných prvků tím, že přijímají content lambdu — poslední parametr typu @Composable () -> Unit. Právě tento mechanismus umožňuje budování vnořených stromů UI: každý kontejner vytváří dceřinou kompozici s vlastním kontextem a oblastí paměti.

Vlastní Composable funkce se dělí na dva podtypy: chytré (smart) a hloupé (dumb). Chytré funkce spravují stav a logiku — obsahují volání remember, LaunchedEffect a dalších API Compose. Hloupé funkce přijímají všechna data prostřednictvím parametrů a pouze je zobrazují. Rozdělení na chytré a hloupé komponenty zlepšuje testovatelnost a znovupoužitelnost kódu.

@Composable a znovupoužitelnost komponent

Hlavní výhoda anotace @Composable — možnost vytvářet znovupoužitelné UI komponenty bez dědičnosti a složitých hierarchií tříd. Na rozdíl od systému View, kde každý vlastní prvek vyžadoval vytvoření Java třídy s konstruktory, je Composable komponent jednoduše funkce Kotlin s parametry.

Pro zajištění znovupoužitelnosti se používá vzor Slot API, při kterém Composable funkce přijímá content lambdy pro různé oblasti svého rozvržení. Například komponent Card může přijímat samostatný content pro záhlaví, tělo a spodní část, což jej činí univerzálním pro jakékoli obrazovky aplikace.

Modifikátory (Modifier) hrají klíčovou roli ve znovupoužitelnosti: umožňují nastavení mezer, velikostí, kliknutí a animací bez změny samotné komponenty. Doporučuje se vždy předávat Modifier jako parametr Composable funkce s výchozí hodnotou: Modifier = Modifier — to je standardní praxe přijatá v oficiálních knihovnách Google.

@Composable
fun SectionCard(
    modifier: Modifier = Modifier,
    title: String,
    content: @Composable () -> Unit
) {
    Card(modifier = modifier) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = title, style = MaterialTheme.typography.titleMedium)
            Spacer(modifier = Modifier.height(8.dp))
            content()
        }
    }
}

Díky Slot API lze komponent SectionCard použít na různých obrazovkách s různým obsahem — formuláři, seznamy, textovými bloky. Kombinace modifikátorů a Slot API činí komponenty Compose maximálně flexibilními bez ztráty typové bezpečnosti, kterou poskytuje Kotlin.