Jak utworzyć RecyclerView w Jetpack Compose?

W Jetpack Compose nie ma RecyclerView w tradycyjnym sensie. Do wyświetlania list używa się LazyColumn (dla list pionowych) i LazyRow (dla list poziomych). Zapewniają one podobną wydajność dzięki ponownemu użyciu elementów.

Przykład użycia 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)
        }
    }
}

Analiza:

• LazyColumn: Funkcja composable, która wyświetla elementy na liście pionowej, tworząc je w razie potrzeby.
• items(itemsList) { item -> ... }: Rozszerzenie dla LazyListScope, które pozwala na iterację po liście danych (itemsList) i wywołanie przekazanego lambda Composable dla każdego elementu (item). W tym bloku określa się, jak wygląda każdy element listy.
• Text(text = item): Prosta funkcja composable wyświetlająca tekst aktualnego elementu listy.

Kluczowe cechy LazyColumn/LazyRow:

• Wydajność: Elementy są tworzone i składane tylko wtedy, gdy stają się widoczne na ekranie lub są blisko krawędzi. To zmniejsza zużycie pamięci i poprawia wydajność dla dużych list.
• Prostota: API jest uproszczone w porównaniu do RecyclerView, nie wymaga tworzenia adapterów, ViewHolderów ani zarządzania cyklem życia tych komponentów.
• Kompletnie zintegrowane: Bezproblemowo współpracuje z innymi funkcjami Compose.

Możesz użyć itemsIndexed, aby uzyskać dostęp do indeksu każdego elementu:

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 = "Element na indeksie $index: $item")
        }
    }
}

Dla bardziej złożonych zachowań (np. różne typy widoków), można użyć przeciążenia items lub 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 -> {
                    // Tutaj można wyświetlić obraz, np. za pomocą funkcji Image
                    Text(text = "Obraz: ${item.url}") // Zastępczy tekst
                }
            }
        }
    }
}