LazyRow i Jetpack Compose — vad är det, egenskaper och hur det fungerar

Vad är LazyRow i Jetpack Compose

LazyRow — är en composable-funktion som implementerar en horisontellt scrollbar lista med lat laddning av element. Till skillnad från Row, som renderar alla underordnade element samtidigt, skapar LazyRow bara element som är synliga i visningsområdet.

LazyRow fungerar enligt samma princip som LazyColumn, men placerar element horisontellt. Vid scrollning åt vänster eller höger återanvänds element som har lämnat visningsområdet för att visa nya. Detta är kritiskt för gallerier med många bilder eller långa kategorilistor.

Enligt Android Developers Blog, 2024 använder LazyRow samma LazyList-arkitektur som LazyColumn, inklusive LazyListState, återanvändningsmekanism via Pool och stöd för olika elementtyper. Maximal effektivitet uppnås med fast höjd på elementen.

Grundläggande signatur för LazyRow

LazyRow accepterar parametrarna modifier, state, contentPadding, reverseLayout, horizontalArrangement och verticalAlignment. Innehållet definieras via DSL-funktionerna items och item, liknande LazyColumn.

@Composable
fun SimpleLazyRow() {
    val items = (1..50).toList()
    LazyRow(
        modifier = Modifier.fillMaxWidth().height(100.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(start = 16.dp, end = 16.dp)
    ) {
        items(items) { item ->
            Box(
                modifier = Modifier.size(80.dp).background(Color.Gray)
            ) {
                Text(text = "$item", modifier = Modifier.align(Alignment.Center))
            }
        }
    }
}

LazyRows egenskaper: horizontalArrangement och contentPadding

horizontalArrangement hanterar fördelningen av element längs den horisontella axeln inuti LazyRow. Samma Arrangement-värden som i Row är tillgängliga: Start, Center, End, SpaceBetween, SpaceEvenly, SpaceAround och spacedBy med anpassat mellanrum.

contentPadding lägger till utfyllnad vid kanterna av LazyRow-behållaren. Till skillnad från Modifier.padding tas contentPadding med i beräkningen vid scrollning: det första elementet har marginal från vänsterkanten, det sista — från högerkanten. Enligt Material Design Guidelines, 2025 är contentPadding obligatoriskt för karuseller och gallerier så att första och sista elementet inte fastnar vid skärmkanten.

verticalAlignment justerar element vertikalt inuti LazyRow. Som standard används Alignment.Top. För centrering av element med olika höjd, använd Alignment.CenterVertically, vilket är användbart för karuseller med bilder av olika proportioner.

Tabell över LazyRow-parametrar

Hantera horisontell scrollning med LazyListState

LazyListState för LazyRow fungerar identiskt som för LazyColumn: det spårar första synliga elementet, förskjutningen och den allmänna scrollpositionen. Tillståndet skapas via rememberLazyListState() och skickas i parametern state.

Programmatisk kontroll av LazyRow-scrollning görs med samma metoder: animateScrollToItem för mjuk animation och scrollToItem för omedelbar scrollning. Båda anropas inuti en korutin. Detta är användbart för karuseller med knappar "Vänster/Höger" eller för automatisk scrollning.

Enligt Android Developers, 2024 stöder LazyRow också SnapFlingBehavior — beteende vid snabb scrollning som stannar på det närmaste elementet, inte mellan element. Detta skapar en "vidhäftningseffekt" till elementet, bekant från karuseller och gallerier.

@Composable
fun CarouselWithSnap() {
    val listState = rememberLazyListState()
    val scope = rememberCoroutineScope()
    val items = listOf("A", "B", "C", "D", "E")

    Column {
        LazyRow(
            state = listState,
            flingBehavior = SnapFlingBehavior(listState),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { item ->
                Card(modifier = Modifier.width(150.dp)) {
                    Text(text = item, modifier = Modifier.padding(16.dp))
                }
            }
        }

        Row(modifier = Modifier.fillMaxWidth()) {
            Button(onClick = {
                scope.launch {
                    listState.animateScrollToItem(0)
                }
            }) { Text("För att starta") }
        }
    }
}

Exempel på användning av LazyRow i gränssnitt

Första exemplet — LazyRow för ett bildgalleri med förhandsvisningar. Varje element är en Box med bild och bildtext. LazyRow hanterar effektivt tiotals och hundratals bilder genom att bara ladda de synliga.

@Composable
fun ImageGallery(images: List<String>) {
    LazyRow(
        contentPadding = PaddingValues(start = 16.dp, end = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        items(images, key = { it }) { url ->
            AsyncImage(
                model = url,
                contentDescription = "Image",
                modifier = Modifier.size(120.dp)
            )
        }
    }
}

Andra exemplet — LazyRow för en kategorilista med ikoner. Kategorier visas som chips och användaren kan scrolla dem horisontellt. LazyRow med spacedBy och contentPadding skapar mellanrum mellan kategorier och vid kanterna.

@Composable
fun CategoryChips(categories: List<String>) {
    LazyRow(
        contentPadding = PaddingValues(horizontal = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(categories, key = { it }) { category ->
            AssistChip(
                onClick = {},
                label = { Text(category) }
            )
        }
    }
}

LazyRow jämfört med Row: när man ska välja vad

Valet mellan LazyRow och Row beror på antalet element. Row passar för 5–10 element som alltid är synliga på skärmen. LazyRow är obligatoriskt när elementen är många eller deras antal är dynamiskt.

Row renderar alla element samtidigt, vilket leder till fördröjningar vid ett stort antal element. LazyRow renderar bara synliga element, vilket gör det att föredra för listor med scrollning. Enligt Android Developers Blog, 2024 är övergångströskeln cirka 10 element: om det finns fler, använd LazyRow.

LazyRow stöder också animationer, SnapFlingBehavior och gruppering via separatorer, vilket gör det mer flexibelt för komplexa gränssnitt. Row är enklare och kräver inte LazyListState, men är inte optimerat för långa listor.

• Row — för 5–10 statiska element utan scrollning
• LazyRow — för 10+ element med horisontell scrollning
• LazyRow — för karuseller, gallerier, dynamiska listor