Jetpack Compose: basis, Composable functies en State

Wat is Jetpack Compose?

Jetpack Compose — UI-framework van Google gebouwd op principes van reactief programmeren. In plaats van Activity met XML-layouts, FragmentManager en ViewBinding beschrijft de ontwikkelaar de interface via Kotlin-functies met de @Composable annotatie. Compose gebruikt geen LayoutInflater — UI is pure Kotlin-functies, gecompileerd naar bytecode. Het framework bestaat uit verschillende bibliotheken: Compose UI (basiscomponenten Text, Button, Column, Row), Compose Foundation (Material Design, Gebaren, Focus), Compose Material3 (Material You met Dynamic Colors) en Compose Runtime (State, Side Effects, Coroutines). Compose werkt op Android API 21+ (Android 5.0) en is volledig compatibel met bestaande View/XML-code via ComposeView — de AndroidView-adapter.

Compose vs View System

View System (2008) gebruikt een hiërarchie van View-objecten met handmatig beheer: de ontwikkelaar maakt een XML-layout, vindt View via findViewById, implementeert Adapter voor RecyclerView en roept notifyDataSetChanged aan bij gegevenswijziging. Compose beschrijft UI functioneel: bij statuswijziging herstart het framework (recompose) alleen gewijzigde Composable-functies, berekent diff en past minimale wijzigingen toe op Canvas. De prestaties van Compose zijn vergelijkbaar met View System, en in scenario's met complexe lijsten (LazyColumn) overtreft het vaak RecyclerView door overbodige elementen over te slaan via de key-parameter. Bij IT Sectr wordt Compose gebruikt voor nieuwe modules van Android-applicaties met minSdk 24+.

Composable functies: bouwblokken van UI

@Composable — annotatie die een gewone Kotlin-functie omzet in een bouwblok van UI. Composable-functies kunnen andere Composable-functies aanroepen en vormen een componentenboom. In tegenstelling tot View hebben Composable-functies standaard geen status — ze zijn stateless en worden opnieuw getekend bij elke wijziging van invoerparameters of State. De compiler (Compose Compiler) transformeert @Composable-functies naar code die kan worden onderbroken en hervat (positional memoization) — dit stelt Compose in staat alleen gewijzigde delen te herstarten zonder de volledige boom opnieuw op te bouwen.

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun UserProfile(name: String, avatarUrl: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        AsyncImage(
            model = avatarUrl,
            contentDescription = "User avatar",
            modifier = Modifier.size(48.dp)
        )
        Spacer(modifier = Modifier.width(12.dp))
        Text(
            text = name,
            style = MaterialTheme.typography.titleMedium
        )
    }
}

De functie UserProfile accepteert name en avatarUrl als parameters, bouwt een rij met avatar en naam. Modifier.fillMaxWidth() strekt de component over de volledige breedte uit, .padding(16.dp) voegt marges toe. MaterialTheme.typography.titleMedium gebruikt de systeemstijl van Material 3. Bij wijziging van de parameters name of avatarUrl herstart Compose UserProfile — het opnieuw aanmaken van de component met nieuwe waarden.

State en Recomposition in Jetpack Compose

State in Compose — elke waarde waarvan de wijziging recompositie (herstart) van afhankelijke @Composable-functies veroorzaakt. De basismethode is mutableStateOf(), die MutableState<T> creëert met ondersteuning voor het snapshot-systeem van Compose. Snapshot — mechanisme voor het volgen van wijzigingen: bij schrijven naar State markeert Compose de huidige Snapshot als dirty, en de recompositieplanner herstart alleen Composable-functies die deze State lezen. Voor observeerbare collecties gebruikt u mutableStateListOf() en mutableStateMapOf(). Compose ondersteunt State uit Lifecycle-Aware componenten via collectAsState() voor Kotlin Flow en observeAsState() voor LiveData.

@Composable
fun LikeButton() {
    var liked by remember { mutableStateOf(false) }
    var count by remember { mutableStateOf(42) }
    
    Button(
        onClick = {
            liked = !liked
            if (liked) count++ else count--
        },
        colors = ButtonDefaults.buttonColors(
            containerColor = if (liked) MaterialTheme.colorScheme.primary
                else MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Text("♥ $count")
    }
}

De code maakt een «Like»-knop met status liked (Boolean) en count (Int), opgeslagen via mutableStateOf(). Bij indrukken wordt liked omgekeerd, de teller verhoogt/verlaagt — Compose herstart automatisch LikeButton. by delegate maakt het mogelijk State als gewone variabele te gebruiken: liked = !liked in plaats van liked.value = !liked.value. De kleur van de knop verandert reactief tussen primary (geliket) en surfaceVariant (niet geliket).

remember: caching tussen recomposities

remember — Compose-functie die de waarde cached tussen recomposities. Zonder remember creëert elke herstart van een Composable-functie een nieuwe status (mutableStateOf) — dit verbreekt de applicatielogica: bij schermrotatie of wijziging van bovenliggende State wordt de teller gereset. remember accepteert een calculator-lambda en berekent de waarde alleen bij de eerste compositie; bij volgende retourneert het de gecachte waarde. Gebruik remember(key) om de cache te resetten — de sleutel bepaalt wanneer de waarde opnieuw wordt berekend. remember(key1, key2) herberekent bij wijziging van een van de sleutels. Voor langlevende statussen (die schermrotatie overleven) gebruikt u rememberSaveable — analoog aan remember met opslag in Bundle via SavedStateHandle.

@Composable
fun TimerScreen() {
    var seconds by rememberSaveable { mutableStateOf(0) }
    
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            seconds++
        }
    }
    
    Column(
        modifier = Modifier.fillMaxSize().padding(32.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Verstreken: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

rememberSaveable behoudt seconds bij schermrotatie (configuratiewijziging). LaunchedEffect start een coroutine die elke seconde seconds verhoogt. Bij recompositie van TimerScreen (elke seconde) wordt seconds niet gereset dankzij rememberSaveable. Gebruik gewone remember voor status die configuratiewijzigingen niet moet overleven (bijv. animatievlaggen).

Modifier: keten van Composable instellingen

Modifier — onveranderlijk container-object dat het Builder-patroon implementeert voor het instellen van uiterlijk, gedrag en lay-out van Composable-componenten. Elke aanroep van een Modifier-methode (.padding(), .width(), .clickable(), .background()) retourneert een nieuwe Modifier met het toegevoegde element. De volgorde van modifiers is belangrijk: .padding(16.dp).clickable { } — marge wordt toegepast vóór de klikhandler, clickable volgt het hele gebied rekening houdend met de marge. .clickable { }.padding(16.dp) — het hele gebied vóór de marge is klikbaar, de marge verplaatst de inhoud naar binnen. Modifier ondersteunt aangepaste implementaties via then(otherModifier) en compositionLocal voor toegang tot bovenliggende instellingen.

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Kaart geklikt") },
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Jetpack Compose", style = MaterialTheme.typography.titleLarge)
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                "Declaratieve UI voor Android met State en Modifier",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

CardExample demonstreert de Modifier-keten: fillMaxWidth + padding + clickable. Card — Material3-component met eigen elevation- en colors-instellingen. Geneste Column heeft interne padding van 16dp. Compose Material3 past kleuren automatisch aan op Dynamic Color (Material You) op Android 12+. Card is een van de 30+ ingebouwde Material3-componenten in Compose.

State hoisting en Compose architectuur

State hoisting — patroon van het omhoog tillen van status uit een Composable-functie naar de aanroeper, waardoor de functie stateless wordt. Een stateless component ontvangt gegevens en callbacks via parameters en bezit geen eigen State. Dit verhoogt herbruikbaarheid en testbaarheid: de component kan met verschillende States worden aangeroepen en in preview worden getest. Google beveelt de architectuur aan: ViewModel + StateFlow (of MutableStateFlow) + collectAsState() in Compose. ViewModel tilt de status naar schermniveau, Compose geeft weer. Bijwerkingen (LaunchedEffect, DisposableEffect) verwerken eenmalige gebeurtenissen.