Ako vytvoriť RecyclerView v Jetpack Compose?

V Jetpack Compose neexistuje RecyclerView v tradičnom zmysle. Na zobrazovanie zoznamov sa používajú LazyColumn (pre zvislé zoznamy) a LazyRow (pre vodorovné zoznamy). Poskytujú podobnú efektívnosť vďaka opätovnému používaniu prvkov.

Príklad použitia 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)
        }
    }
}

Analýza:

• LazyColumn: Komponovateľná funkcia, ktorá zobrazuje prvky vo zvislom zozname, vytvára ich podľa potreby.
• items(itemsList) { item -> ... }: Rozšírenie pre LazyListScope, ktoré umožňuje iterovať cez zoznam dát (itemsList) a pre každý prvok (item) volať poskytnutý Composable lambda blok. V tomto bloku je určené, ako bude vyzerať každý prvok zoznamu.
• Text(text = item): Jednoduchá podkomponenta, ktorá zobrazuje text aktuálneho prvku zoznamu.

Kľúčové vlastnosti LazyColumn/LazyRow:

• Efektívnosť: Prvky sa vytvárajú a komponujú iba vtedy, keď sú viditeľné na obrazovke alebo sú blízko k okraju. To znižuje spotrebu pamäte a zlepšuje výkon pre veľké zoznamy.
• Jednoduchosť: Zjednodušené API v porovnaní s RecyclerView, ktoré nevyžaduje vytváranie adaptéra, ViewHoldera a riadenie životného cyklu týchto komponentov.
• Komponovateľný prvok: Plne sa integruje s ostatnými Compose funkciami.

Môžeme použiť itemsIndexed na prístup k indexu každého prvku:

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 at index $index: $item")
        }
    }
}

Pre zložitejšie správanie (napríklad rôzne typy zobrazení) môžete použiť preťaženie items alebo item:

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 -> {
                    // Tu môžeš zobraziť obrázok, napríklad pomocou funkcie Image
                    Text(text = "Image: ${item.url}") // Zástupný prvok
                }
            }
        }
    }
}