Jetpack Compose: grunder, Composable-funktioner och State

Vad är Jetpack Compose?

Jetpack Compose — Googles UI-ramverk byggt på principer för reaktiv programmering. Istället för Activity med XML-layouter, FragmentManager och ViewBinding beskriver utvecklaren gränssnittet genom Kotlin-funktioner med @Composable-annotering. Compose använder inte LayoutInflater — UI är rena Kotlin-funktioner, kompilerade till bytekod. Ramverket består av flera bibliotek: Compose UI (grundläggande komponenter Text, Button, Column, Row), Compose Foundation (Material Design, Gester, Fokus), Compose Material3 (Material You med Dynamic Colors) och Compose Runtime (State, Side Effects, Coroutines). Compose fungerar på Android API 21+ (Android 5.0) och är fullt kompatibelt med befintlig View/XML-kod via ComposeView — AndroidView-adaptern.

Compose vs View System

View System (2008) använder en hierarki av View-objekt med manuell hantering: utvecklaren skapar en XML-layout, hittar View via findViewById, implementerar Adapter för RecyclerView och anropar notifyDataSetChanged vid dataändring. Compose beskriver UI funktionellt: vid tillståndsändring startar ramverket om (recompose) endast ändrade Composable-funktioner, beräknar diff och tillämpar minimala ändringar på Canvas. Compose-prestanda är jämförbar med View System, och i scenarier med komplexa listor (LazyColumn) överträffar det ofta RecyclerView genom att hoppa över onödiga element via key-parametern. På IT Sectr används Compose för nya moduler av Android-applikationer med minSdk 24+.

Composable-funktioner: byggstenar för UI

@Composable — annotering som omvandlar en vanlig Kotlin-funktion till en byggsten för UI. Composable-funktioner kan anropa andra Composable-funktioner och bilda ett komponentträd. Till skillnad från View har Composable-funktioner inget tillstånd som standard — de är stateless och ritas om vid varje ändring av indataparametrar eller State. Kompilatorn (Compose Compiler) transformerar @Composable-funktioner till kod som kan avbrytas och återupptas (positional memoization) — detta gör att Compose kan starta om endast ändrade delar utan att fullständigt bygga om trädet.

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
        )
    }
}

Funktionen UserProfile tar emot name och avatarUrl som parametrar, bygger en rad med avatar och namn. Modifier.fillMaxWidth() sträcker ut komponenten till full bredd, .padding(16.dp) lägger till mellanrum. MaterialTheme.typography.titleMedium använder systemstilen från Material 3. Vid ändring av parametrarna name eller avatarUrl startar Compose om UserProfile — återskapande av komponenten med nya värden.

State och Recomposition i Jetpack Compose

State i Compose — varje värde vars ändring orsakar rekomposition (omstart) av beroende @Composable-funktioner. Grundmetoden är mutableStateOf(), som skapar MutableState<T> med stöd för Compose ögonblicksbildssystem. Snapshot — mekanism för spårning av ändringar: vid skrivning till State markerar Compose den aktuella Snapshot som smutsig, och rekompositionsplaneraren startar endast om de Composable-funktioner som läser detta State. För observerbara samlingar använd mutableStateListOf() och mutableStateMapOf(). Compose stöder State från Lifecycle-Aware-komponenter via collectAsState() för Kotlin Flow och observeAsState() för 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")
    }
}

Koden skapar en «Like»-knapp med tillstånden liked (Boolean) och count (Int), lagrade via mutableStateOf(). Vid tryckning inverteras liked, räknaren ökar/minskar — Compose startar automatiskt om LikeButton. by delegate gör det möjligt att använda State som en vanlig variabel: liked = !liked istället för liked.value = !liked.value. Knappens färg ändras reaktivt mellan primary (gillad) och surfaceVariant (ogillad).

remember: cachning mellan rekompositioner

remember — Compose-funktion som cachar värdet mellan rekompositioner. Utan remember skapar varje omstart av en Composable-funktion ett nytt tillstånd (mutableStateOf) — detta bryter applikationslogiken: vid skärmrotation eller ändring av överordnat State återställs räknaren. remember tar emot en kalkylator-lambda och beräknar värdet endast vid första kompositionen; vid efterföljande returnerar det cachade resultatet. För att återställa cachen använd remember(key) — nyckeln avgör när värdet ska beräknas om. remember(key1, key2) beräknar om vid ändring av någon nyckel. För långlivade tillstånd (som överlever skärmrotation) använd rememberSaveable — analog till remember med lagring i 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 = "Förfluten tid: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

rememberSaveable bevarar seconds vid skärmrotation (konfigurationsändring). LaunchedEffect startar en koroutin som ökar seconds varje sekund. Vid rekomposition av TimerScreen (varje sekund) återställs seconds inte tack vare rememberSaveable. Använd vanlig remember för tillstånd som inte bör överleva konfigurationsändringar (t.ex. animeringsflaggor).

Modifier: kedja av Composable-inställningar

Modifier — oföränderligt containerobjekt som implementerar Builder-mönstret för inställning av utseende, beteende och layout för Composable-komponenter. Varje anrop till Modifier-metoden (.padding(), .width(), .clickable(), .background()) returnerar en ny Modifier med det tillagda elementet. Ordningen på modifierare är viktig: .padding(16.dp).clickable { } — mellanrum appliceras före klickhanteraren, clickable övervakar hela området med hänsyn till mellanrummet. .clickable { }.padding(16.dp) — hela området före mellanrummet är klickbart, mellanrummet flyttar innehållet inåt. Modifier stöder anpassade implementationer via then(otherModifier) och compositionLocal för åtkomst till överordnade inställningar.

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Kort klickat") },
        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(
                "Deklarativt UI för Android med State och Modifier",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

CardExample demonstrerar Modifier-kedjan: fillMaxWidth + padding + clickable. Card — Material3-komponent med egna elevation- och colors-inställningar. Kapslad Column har inre padding på 16dp. Compose Material3 anpassar automatiskt färger till Dynamic Color (Material You) på Android 12+. Card är en av 30+ inbyggda Material3-komponenter i Compose.

State hoisting och Compose-arkitektur

State hoisting — mönster för att lyfta tillstånd från en Composable-funktion till dess anropare, vilket gör funktionen stateless. En stateless-komponent tar emot data och callbacks via parametrar utan att äga eget State. Detta ökar återanvändbarhet och testbarhet: komponenten kan anropas med olika State och testas i förhandsgranskning. Google rekommenderar arkitekturen: ViewModel + StateFlow (eller MutableStateFlow) + collectAsState() i Compose. ViewModel lyfter tillstånd till skärmnivå, Compose visar. Sidoeffekter (LaunchedEffect, DisposableEffect) hanterar engångshändelser.