Jak vytvořit RecyclerView v Jetpack Compose?

V Jetpack Compose neexistuje RecyclerView v tradičním smyslu. Pro zobrazení seznamů se používá LazyColumn (pro svislé seznamy) a LazyRow (pro vodorovné seznamy). Poskytují podobnou efektivitu díky opětovnému použití prvků.

Příklad použití 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: Komponovatelná funkce, která zobrazuje prvky ve svislém seznamu, vytváří je podle potřeby.
• items(itemsList) { item -> ... }: Rozšíření pro LazyListScope, které umožňuje iterovat přes seznam dat (itemsList) a pro každý prvek (item) volat poskytnutý Composable lambda blok. V tomto bloku je určeno, jak bude vypadat každý prvek seznamu.
• Text(text = item): Jednoduchá podřízená komponovatelná funkce, která zobrazuje text aktuálního prvku seznamu.

Hlavní vlastnosti LazyColumn/LazyRow:

• Efektivita: Prvky jsou vytvářeny a komponovány pouze tehdy, když jsou viditelné na obrazovce nebo jsou blízko okraje. To snižuje spotřebu paměti a zlepšuje výkon pro velké seznamy.
• Jednoduchost: Zjednodušené API ve srovnání s RecyclerView, které nevyžaduje vytváření adaptéru, ViewHolderu a řízení životního cyklu těchto komponent.
• Komponovatelný přístup: Plně se integruje s ostatními Compose funkcemi.

Lze použít itemsIndexed pro pří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")
        }
    }
}

Pro složitější chování (například různé typy zobrazení) lze použít přetížení items nebo 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 -> {
                    // Zde můžeš zobrazit obrázek, například pomocí funkce Image
                    Text(text = "Image: ${item.url}") // Zástupný prvek
                }
            }
        }
    }
}