Composable Function: co to je, syntaxe funkce a pravidla

Co je Composable Function v Jetpack Compose

Composable Function — je funkce v jazyce Kotlin označená anotací @Composable, která popisuje část uživatelského rozhraní deklarativním způsobem. Místo vytváření a konfigurace View objektů přes Java kód nebo XML značky, vývojář jednoduše píše, jak má UI vypadat při každém stavu dat.

Hlavní rozdíl mezi Composable funkcí a tradičním View systémem Android spočívá v modelu aktualizace. V klasickém přístupu vývojář ručně volal findViewById, měnil text přes setText, spravoval viditelnost přes setVisibility. Composable Function od této rutiny osvobozuje: při změně dat systém sám určí, které funkce je třeba restartovat, a provede pouze je.

Kompilátor Kotlin při zpracování anotace @Composable generuje další kód, který integruje funkci do mechanismu kompozice. Tento kód zahrnuje čtení a zápis do slotů — speciálních paměťových buněk, které ukládají stav a parametry každé Composable funkce v aktuálním stromu UI. Díky této integraci Compose ví, které funkce závisí na kterých datech.

Syntaxe deklarace Composable funkce

Syntaxe Composable funkce je maximálně stručná: stačí přidat @Composable před klíčové slovo fun. Funkce může přijímat libovolné parametry, zahrnovat další Composable volání ve svém těle a používat Kotlin konstrukce — podmínky, cykly, when výrazy — pro podmíněné zobrazení UI.

@Composable
fun ProductItem(
    product: Product,
    modifier: Modifier = Modifier,
    onAddToCart: () -> Unit
) {
    Card(modifier = modifier.padding(8.dp)) {
        Row(modifier = Modifier.fillMaxWidth().padding(12.dp),
            verticalAlignment = Alignment.CenterVertically) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = product.name, style = MaterialTheme.typography.titleMedium)
                Text(text = "${product.price}", color = MaterialTheme.colorScheme.primary)
            }
            Button(onClick = onAddToCart) {
                Text("Přidat do košíku")
            }
        }
    }
}

V tomto příkladu Composable funkce ProductItem přijímá objekt Product, modifikátor a callback. Všechny tři parametry jsou neměnné, což zaručuje předvídatelné chování při rekompozici. Modifikátor je předán jako parametr s výchozí hodnotou — to je standardní praxe umožňující volající straně přizpůsobit okraje a rozměry.

Komponenty a modifikátory v Composable funkcích

Uvnitř Composable funkce se používají vestavěné komponenty Material Design (Text, Button, Card, TextField) nebo základní primitiva (Canvas, Layout). Každá komponenta přijímá parametry pro konfiguraci vzhledu a chování a jeden nebo více modifikátorů přes parametr modifier.

Modifikátory (Modifier) — jsou řetězcem funkcí, které mění velikost, pozici, zpracování událostí a vzhled komponenty. Pořadí modifikátorů v řetězci má význam: clickable.semantics funguje jinak než semantics.clickable a padding.background barví pozadí oblasti včetně padding, což je při navrhování kritické.

Uvnitř Composable funkce lze použít podmínky if a when pro podmíněné zobrazení částí UI a cykly for pro dynamické seznamy. Všechny tyto konstrukce fungují přirozeně, protože Kotlin je plnohodnotný programovací jazyk. Je však důležité si pamatovat: pokud podmínka nebo cyklus obsahuje volání Composable funkcí, tyto se také účastní rekompozice.

@Composable
fun ProductList(
    products: List<Product>,
    modifier: Modifier = Modifier
) {
    LazyColumn(modifier = modifier) {
        items(products, key = { it.id }) { product ->
            ProductItem(
                product = product,
                onAddToCart = { /* add to cart */ }
            )
        }
    }
}

Příklady Composable funkcí pro reálné obrazovky

Podívejme se na příklad obrazovky vyhledávání produktů s použitím několika Composable funkcí. Jsou zde zobrazeny typické vzory: vstupní pole se stavem, filtrování seznamu, zpracování prázdného výsledku a načítání.

data class Product(
    val id: String,
    val name: String,
    val price: Double,
    val category: String
)

@Composable
fun SearchScreen() {
    var query by remember { mutableStateOf("") }
    val products = remember(query) { getFilteredProducts(query) }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        OutlinedTextField(
            value = query,
            onValueChange = { query = it },
            label = { Text("Hledat produkty") },
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        when (products) {
            is Loading -> CircularProgressIndicator()
            is Empty -> Text("Nebyly nalezeny žádné výsledky")
            is Result -> LazyColumn {
                items(products.items, key = { it.id }) { product ->
                    ProductItem(product = product, onAddToCart = {})
                }
            }
        }
    }
}

Tento příklad demonstruje několik idiomů najednou: remember pro uložení stavu vyhledávacího dotazu, remember(query) pro filtrování s klíčem, when pro tři stavy UI a LazyColumn pro efektivní zobrazení seznamu. Každý z těchto idiomů je výsledkem praktických zkušeností s vývojem Compose aplikací.

Parametry a Slot API

Composable funkce přijímají parametry stejně jako běžné Kotlin funkce, ale s jedním důležitým rozdílem: parametr může být jiná Composable funkce předaná přes lambdu s anotací @Composable. Tento mechanismus se nazývá Slot API a je hlavním vzorem pro vytváření znovupoužitelných kontejnerů.

Slot API řeší problém, který byl v tradičním View systému řešen přes ViewGroup a programové přidávání podřízených View. Místo metod addView používá Compose content lambdy — poslední parametr s typem @Composable () -> Unit. Volající strana předá této lambdě libovolný UI a samotný kontejner určuje pouze jeho umístění.

Parametry Composable funkce mohou mít výchozí hodnoty, což zjednodušuje jejich použití v různých kontextech. Doporučuje se povinnými činit pouze ty parametry, bez kterých funkce nemůže splnit svůj úkol, a ostatní vybavit rozumnými výchozími hodnotami.

Idiomy Composable funkcí v Kotlin

V komunitě Compose se vyvinulo několik zavedených idiomů, které činí Composable funkce čitelnějšími a předvídatelnějšími. První — State Hoisting: stav je zvednut na vyšší úroveň a Composable funkce jej dostává přes parametry. To činí funkci čistou a znovupoužitelnou v různých kontextech.

Druhý idiom — parametry Event-driven. Místo předávání ViewModel nebo useCase do Composable funkce se předávají pouze konkrétní callbacky: onSave, onDelete, onNavigateToDetail. To snižuje provázanost a zjednodušuje testování — pro test ProductItem není potřeba ViewModel, pouze lambda-stub.

Třetí idiom — CompositionLocal pro předávání společných dat přes strom kompozice. Téma, hustota obrazovky, aktuální cesta — to vše se předává přes CompositionLocal, čímž se vyhnete řetězcům parametrů přes desítky Composable funkcí. CompositionLocal by se však neměl zneužívat: explicitní parametry jsou vždy preferovány před implicitními závislostmi.

// State Hoisting: stav zvednut do nadřazené funkce
@Composable
fun CounterDisplay(
    count: Int,
    onIncrement: () -> Unit
) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "Počítadlo: $count", style = MaterialTheme.typography.headlineLarge)
        Button(onClick = onIncrement) {
            Text("+1")
        }
    }
}

// Použití se State Hoisting
@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }
    CounterDisplay(
        count = count,
        onIncrement = { count++ }
    )
}