Jetpack Compose inom mobilutveckling: vad det är, nyckelkoncept och hur det fungerar

Jetpack Compose grunder (@Composable, Composition, Recomposition)

@Composable — annotering som omvandlar en funktion till Composable. Composable-funktioner är UI-byggstenar. De returnerar inte en View, de avger element till Composition. Composition — ett UI-träd byggt från anrop av Composable-funktioner. Compose jämför det nya trädet med det gamla och uppdaterar endast de ändrade delarna.

Recomposition

Recomposition — omstart av Composable-funktioner vid tillståndsändring. Compose spårar vilka tillstånd som läses i varje funktion. När ett tillstånd ändras startar Compose endast om de funktioner som läser det tillståndet (Smart Recomposition). Omkomposition är optimistisk: kan köras flera gånger, så funktioner måste vara rena (utan bieffekter). Bieffekter placeras i LaunchedEffect eller DisposableEffect. Composable-funktioner kan inte vara suspend. De anropas från andra Composable-funktioner. Anropsordningen är inte garanterad (Compose kan omordna).

// Composable-exempel med State Hoisting och LazyColumn
@Composable
fun ItemList(
    items: List<String>,
    onItemClick: (String) -> Unit
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onItemClick(item) }
                    .padding(8.dp)
            ) {
                Text(
                    text = item,
                    style = MaterialTheme.typography.bodyLarge
                )
            }
        }
    }
}

@Composable
fun MainScreen() {
    var text by remember { mutableStateOf("") }
    val items = listOf("Item 1", "Item 2", "Item 3")

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Compose App") })
        }
    ) { padding ->
        ItemList(
            items = items,
            onItemClick = { selected -> text = selected }
        )
    }
}

Composition — deklarativt träd. Recomposition — smart omstart. IT Sectr rekommenderar att övervaka typstabilitet — instabila typer orsakar överdriven omkomposition.

CompositionLocal

CompositionLocal — implicit dataöverföring i Compose. Analogt med @Environment i SwiftUI. CompositionLocalProvider — ange värde. current — läsning. Används för: Theme (MaterialTheme), ContentScale, Density. Statisk CompositionLocal — för konfiguration utan ändringar. Dynamisk CompositionLocal — för föränderliga värden (teman). IT Sectr rekommenderar att använda CompositionLocal för globala konfigurationer och explicita parametrar för data.

Tillstånd (remember, mutableStateOf, State Hoisting)

remember — bevarar värde mellan omkompositioner. mutableStateOf — skapar observerbart tillstånd (MutableState<T>). Vid ändring utlöses omkomposition. State Hoisting — mönster: tillståndet lyfts till föräldrakomponenten, barnet får värde + återanrop. State (oföränderligt) — endast läsning. MutableState — läsning + skrivning. rememberSaveable — finns kvar vid rotation/processdöd.

State Hoisting

State Hoisting — princip: state down, events up. Tillståndet lagras i föräldern och skickas till barnkomponenter via parametrar. Barnkomponenter rapporterar ändringar via lambdas (återanrop). Fördelar: återanvändbarhet, testbarhet, enda källa till sanning. Exempel: istället för att MyTextField lagrar sitt eget tillstånd, lagrar föräldern strängen och skickar den via value + onValueChange.

Härlett tillstånd

derivedStateOf — beräknat tillstånd, omräknas endast när beroenden ändras. Används för filtrering, konvertering, validering. snapshotFlow — konverterar State till Flow. Används för reaktiva kedjor. collectAsState — samlar Flow till State inuti Composable. IT Sectr rekommenderar derivedStateOf för beräknade värden och snapshotFlow för att koppla State till korutiner.

Behållare (Column, Row, Box, LazyColumn)

Column — vertikal layout (analogt med LinearLayout vertikal). Row — horisontell layout. Box — staplingslayout (analogt med FrameLayout). LazyColumn — vertikal rullningsbar lista med lat laddning. LazyRow — horisontell rullningsbar lista. Scaffold — huvudskärmstruktur: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — övre fält. BottomNavigation — nedre navigering (NavigationBar i Material 3). Modifier — kedja: .fillMaxWidth().padding(8.dp).clickable { }. Ordningen på modifierare är viktig — varje skapar ett nytt omslag.

LazyColumn-optimering

LazyColumn — virtualiserad lista. Renderar endast synliga element. Optimering: 1) key — unik nyckel för objekt, 2) contentType — gruppera objekt efter typ, 3) itemContent — minimera omkomposition inom objekt, 4) LazyVerticalGrid / LazyHorizontalGrid — för rutnät. LazyLayout — anpassad lat layout. Paging 3 + Compose — paginering via collectAsLazyPagingItems. IT Sectr rekommenderar key(item) för alla LazyColumn för förutsägbar omkomposition.

Navigering (NavController, NavHost)

Navigation Compose — navigeringsbibliotek. NavController — hanterar destinationsstacken. NavHost — behållare för navigeringsgrafen. composable("route") — registrera destination. navController.navigate("route") — navigera. popBackStack() — gå tillbaka. Argument: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). Deep linking via intentFilter. BottomNavigation — integration med NavController: NavBarItem → navigate + popUpTo.

Avancerad navigering

Flera bakåtstackar — separat bakåtstack för varje BottomNavigation-flik. SavedStateHandle — bevara argument vid processdöd. NavArgs — typsäkra argument (Kotlin 2.0+). Deep links — URL-scheman för externa länkar. Prediktiv bakåtgest (Android 14+) — stöd för bakåtgest med förhandsvisning. IT Sectr rekommenderar att använda NavArgs för typsäkerhet och flera bakåtstackar för BottomNavigation.

Effekter (LaunchedEffect, DisposableEffect)

LaunchedEffect — startar ett suspend-block i Composition. Avbryts när Composition lämnas. Startas om när keys ändras. Används för: dataladdning, timers, animationer. DisposableEffect — för resurser som kräver rensning: onDispose { } — avsluta prenumeration på lyssnare, stäng anslutningar. SideEffect — synkron effekt (varje omkomposition). Används för: loggning, synkronisering med icke-Compose-kod. IT Sectr rekommenderar LaunchedEffect för dataladdning och DisposableEffect för rensning.

Compose — funktion + modifierare. SwiftUI — struct + modifierare. Koncepten är liknande, syntaxen är olik. IT Sectr rekommenderar att lära sig båda ramverken — att förstå ett underlättar inlärningen av det andra.

Effektmönster

rememberCoroutineScope — åtkomst till CoroutineScope utanför LaunchedEffect (t.ex. vid knapptryckning). snapshotFlow — omvandla State till Flow för kedjor. produceState — omvandla icke-Compose-källa till State. animateFloatAsState och animateColorAsState — animationer via effekter. IT Sectr rekommenderar rememberCoroutineScope för UI-händelser och LaunchedEffect för automatisk laddning.

Teman (MaterialTheme, Material3)

MaterialTheme — globalt Compose-tema. Färger, typografi, former. MaterialTheme { } — omsluter hela appen. Material3 (M3) — Google designsystem 2023+. Dynamic Colors — anpassning till bakgrundsbild (Android 12+). TextStyle — textkonfiguration: fontSize, fontWeight, lineHeight. Shape — rundning av hörn. Elevation — skuggor. IT Sectr rekommenderar Material3 som standard och Dynamic Colors för moderna enheter.

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) {
        darkColorScheme(
            primary = Color(0xFFBB86FC),
            secondary = Color(0xFF03DAC6)
        )
    } else {
        lightColorScheme(
            primary = Color(0xFF6200EE),
            secondary = Color(0xFF03DAC6)
        )
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(
            bodyLarge = TextStyle(fontSize = 16.sp)
        )
    ) { content() }
}

Animationer (animate*, AnimatedVisibility)

animateFloatAsState — animerar Float-värde. animateColorAsState — animerar färg. animateDpAsState — animerar storlek. AnimatedVisibility — visa/dölj med .animateEnterExit(). AnimatedContent — animation vid innehållsändring (crossfade, slide). updateTransition — animation baserad på enum-tillstånd. Animatable — anpassad animation via Animatable-gränssnitt. IT Sectr rekommenderar AnimatedVisibility för listor och AnimatedContent för skärmövergångar.

@Composable
fun AnimatedCounter(count: Int) {
    val animatedCount by animateFloatAsState(
        targetValue = count.toFloat(),
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )

    AnimatedContent(targetState = count) { targetCount ->
        Text(
            text = "$targetCount",
            style = MaterialTheme.typography.displayLarge,
            modifier = Modifier.animateContentSize()
        )
    }
}

Testning (Compose UI Test)

Compose UI Test — testning av Compose-skärmar. createComposeRule() — JUnit-regel. setContent { } — ange Composable. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — hitta element. performClick, performTextInput, performScrollTo — åtgärder. assertIsDisplayed, assertTextEquals — påståenden. Semantics — Semantics-träd för tillgänglighet och tester. IdlingResource — vänta på asynkrona operationer. Skärmbildstester — Papercuts, Roborazzi. IT Sectr rekommenderar UI-tester för varje skärm och enhetstester för ViewModel.

WindowSizeClass — anpassning till skärmstorlek (Compact, Medium, Expanded). Relaterat till responsiva Material3-layouter. Används i Adaptive Navigation Suite för automatisk växling från BottomNavigation till NavigationRail. IT Sectr rekommenderar WindowSizeClass för anpassning av Compose på surfplattor och stationära datorer.

Paging 3 + Compose — pagineringsbibliotek från Google. PagingData — sidström. PagingConfig — inställningar (pageSize, prefetchDistance). collectAsLazyPagingItems() — samla i Compose. PagingSource — anpassad källa. RemoteMediator — hybridladdning (nätverk + DB). Paging 3 är standarden för listor med oändlig rullning i Compose.