Hoe maak je een RecyclerView in Jetpack Compose…

In Jetpack Compose bestaat er geen RecyclerView in de traditionele zin. Voor het weergeven van lijsten worden LazyColumn (voor verticale lijsten) en LazyRow (voor horizontale lijsten) gebruikt. Ze bieden vergelijkbare efficiëntie door hergebruik van elementen.

Voorbeeld van het gebruik van LazyColumn:

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun SimpleList(itemsList: List<String>) {
    LazyColumn {
        items(itemsList) { item ->
            Text(text = item)
        }
    }
}

Analyse:

LazyColumn: Een composable functie die elementen in een verticale lijst toont, en deze op aanvraag creëert.
items(itemsList) { item -> ... }: Uitbreiding voor LazyListScope die het mogelijk maakt om over de gegevenslijst (itemsList) te itereren en voor elk element (item) de meegeleverde Composable lambda aan te roepen. Dit blok bepaalt hoe elk lijstitem eruitziet.
Text(text = item): Een eenvoudige composable functie die de tekst van het huidige lijstitem toont.

Belangrijkste kenmerken van LazyColumn/LazyRow:

Efficiëntie: Elementen worden alleen gemaakt en samengesteld wanneer ze zichtbaar worden of dicht bij de rand liggen. Dit vermindert het geheugengebruik en verbetert de prestaties bij grote lijsten.
Eenvoud: API is vereenvoudigd in vergelijking met RecyclerView, zonder dat een adapter, ViewHolder of levenscyclusbeheer nodig is.
Naadloze integratie: Werkt volledig samen met andere Compose-functies.

Gebruik itemsIndexed om toegang te krijgen tot de index van elk element:

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun IndexedList(itemsList: List<String>) {
    LazyColumn {
        itemsIndexed(itemsList) { index, item ->
            Text(text = "Item op index $index: $item")
        }
    }
}

Voor complexere gedrag (bijvoorbeeld verschillende weergavertypes) kan je overloads van items of item gebruiken:

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

sealed class ListItem {
    data class TextItem(val content: String) : ListItem()
    data class ImageItem(val url: String) : ListItem()
}

@Composable
fun MixedList(itemsList: List<ListItem>) {
    LazyColumn {
        items(itemsList) { item ->
            when (item) {
                is ListItem.TextItem -> Text(text = item.content)
                is ListItem.ImageItem -> {
                    // Hier kan je een afbeelding tonen, bijvoorbeeld met de Image functie
                    Text(text = "Afbeelding: ${item.url}") // Plaatshouder
                }
            }
        }
    }
}

Hoe maak je een RecyclerView in Jetpack Compose?