Composable Function: wat is het, functiesyntaxis en regels

Wat is Composable Function in Jetpack Compose

Composable Function — is een functie in de programmeertaal Kotlin, gemarkeerd met de @Composable annotatie, die een deel van de gebruikersinterface op een declaratieve manier beschrijft. In plaats van View-objecten te maken en te configureren via Java-code of XML-markup, schrijft de ontwikkelaar eenvoudigweg hoe de UI eruit moet zien bij elke gegevenstoestand.

Het belangrijkste verschil tussen een Composable-functie en het traditionele Android View-systeem zit in het updatemodel. In de klassieke benadering riep de ontwikkelaar handmatig findViewById aan, wijzigde tekst via setText, beheerde zichtbaarheid via setVisibility. Composable Function bevrijdt van deze routine: bij gegevenswijziging bepaalt het systeem zelf welke functies opnieuw moeten worden gestart en voert alleen deze uit.

De Kotlin-compiler genereert bij het verwerken van de @Composable annotatie extra code die de functie integreert in het compositiemechanisme. Deze code omvat het lezen en schrijven naar slots — speciale geheugencellen die de status en parameters van elke Composable-functie in de huidige UI-boom opslaan. Dankzij deze integratie weet Compose welke functies van welke gegevens afhankelijk zijn.

Syntaxis van het declareren van een Composable-functie

De syntaxis van een Composable-functie is uiterst beknopt: voeg gewoon @Composable toe voor het sleutelwoord fun. De functie kan elke parameter accepteren, andere Composable-aanroepen in zijn lichaam bevatten en Kotlin-constructies gebruiken — condities, loops, when-expressies — voor voorwaardelijke weergave van 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("Toevoegen aan winkelwagen")
            }
        }
    }
}

In dit voorbeeld accepteert de Composable-functie ProductItem een Product-object, een modifier en een callback. Alle drie parameters zijn onveranderlijk, wat voorspelbaar gedrag garandeert bij recompositie. De modifier is doorgegeven als parameter met een standaardwaarde — dit is een standaardpraktijk die de aanroepende partij in staat staat om marges en afmetingen aan te passen.

Componenten en modifiers in Composable-functies

Binnen een Composable-functie worden ingebouwde Material Design-componenten (Text, Button, Card, TextField) of fundamentele primitieven (Canvas, Layout) gebruikt. Elke component accepteert parameters voor het configureren van uiterlijk en gedrag, en een of meer modifiers via de modifier-parameter.

Modifiers — zijn een keten van functies die de grootte, positie, gebeurtenisafhandeling en het uiterlijk van een component wijzigen. De volgorde van modifiers in de keten is belangrijk: clickable.semantics werkt anders dan semantics.clickable, en padding.background kleurt de achtergrond van het gebied inclusief padding, wat cruciaal is bij het ontwerpen.

Binnen een Composable-functie kunnen if- en when-condities worden gebruikt voor voorwaardelijke weergave van UI-delen, en for-loops voor dynamische lijsten. Al deze constructies werken van nature, omdat Kotlin een volwaardige programmeertaal is. Het is echter belangrijk te onthouden: als de conditie of loop aanroepen van Composable-functies bevat, nemen deze ook deel aan de recompositie.

@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 */ }
            )
        }
    }
}

Voorbeelden van Composable-functies voor echte schermen

Laten we een voorbeeld bekijken van een productzoekscherm met behulp van meerdere Composable-functies. Hier worden typische patronen getoond: invoerveld met status, filteren van de lijst, afhandeling van leeg resultaat en laden.

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("Producten zoeken") },
            modifier = Modifier.fillMaxWidth()
        )

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

        when (products) {
            is Loading -> CircularProgressIndicator()
            is Empty -> Text("Geen resultaten gevonden")
            is Result -> LazyColumn {
                items(products.items, key = { it.id }) { product ->
                    ProductItem(product = product, onAddToCart = {})
                }
            }
        }
    }
}

Dit voorbeeld demonstreert meerdere idiomen tegelijk: remember voor het opslaan van de zoekopdrachtstatus, remember(query) voor filteren met sleutel, when voor drie UI-toestanden en LazyColumn voor efficiënte lijstweergave. Elk van deze idiomen is het resultaat van praktische ervaring in het ontwikkelen van Compose-applicaties.

Parameters en Slot API

Composable-functies accepteren parameters net als gewone Kotlin-functies, maar met één belangrijk verschil: een parameter kan een andere Composable-functie zijn die wordt doorgegeven via een lambda met @Composable annotatie. Dit mechanisme heet Slot API en is het belangrijkste patroon voor het maken van herbruikbare containers.

Slot API lost het probleem op dat in het traditionele View-systeem werd opgelost via ViewGroup en het programmatisch toevoegen van kind-Views. In plaats van addView-methoden gebruikt Compose content-lambdas — de laatste parameter met het type @Composable () -> Unit. De aanroepende partij geeft elke UI door aan deze lambda, en de container zelf bepaalt alleen de plaatsing ervan.

Parameters van een Composable-functie kunnen standaardwaarden hebben, wat het gebruik ervan in verschillende contexten vereenvoudigt. Het wordt aanbevolen alleen die parameters verplicht te maken zonder welke de functie zijn taak niet kan uitvoeren, en de andere te voorzien van redelijke standaardwaarden.

Idiomen van Composable-functies in Kotlin

In de Compose-gemeenschap zijn verschillende gevestigde idiomen ontstaan die Composable-functies leesbaarder en voorspelbaarder maken. De eerste — State Hoisting: de status wordt naar een hoger niveau getild en de Composable-functie ontvangt deze via parameters. Dit maakt de functie puur en herbruikbaar in verschillende contexten.

Het tweede idioom — Event-driven parameters. In plaats van ViewModel of useCase door te geven aan de Composable-functie, worden alleen specifieke callbacks doorgegeven: onSave, onDelete, onNavigateToDetail. Dit vermindert koppeling en vereenvoudigt testen — voor het testen van ProductItem is geen ViewModel nodig, alleen een lambda-stub.

Het derde idioom — CompositionLocal voor het doorgeven van gemeenschappelijke gegevens door de compositieboom. Thema, schermdichtheid, huidige route — dit alles wordt doorgegeven via CompositionLocal, waardoor parameterketens door tientallen Composable-functies worden vermeden. Men moet CompositionLocal echter niet misbruiken: expliciete parameters hebben altijd de voorkeur boven impliciete afhankelijkheden.

// State Hoisting: status verhoogd naar bovenliggende functie
@Composable
fun CounterDisplay(
    count: Int,
    onIncrement: () -> Unit
) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "Teller: $count", style = MaterialTheme.typography.headlineLarge)
        Button(onClick = onIncrement) {
            Text("+1")
        }
    }
}

// Gebruik met State Hoisting
@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }
    CounterDisplay(
        count = count,
        onIncrement = { count++ }
    )
}