Hogyan hozzunk létre egy RecyclerView-t a Jetpack…

A Jetpack Compose-ban nincs RecyclerView hagyományos értelemben. Listák megjelenítéséhez a LazyColumn (függőleges listákhoz) és a LazyRow (vízszintes listákhoz) használható. Ezek hasonló hatékonyságot nyújtanak az elemek újrafelhasználásával.

Példa a LazyColumn használatára:

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)
        }
    }
}

Elemzés:

LazyColumn: Egy komponálható függvény, amely függőleges listában jeleníti meg az elemeket, szükség szerint hozva létre azokat.
items(itemsList) { item -> ... }: Bővítmény a LazyListScope-hoz, amely lehetővé teszi, hogy iteráljunk az adatok listáján (itemsList) és minden elemhez (item) meghívjuk a megadott Composable lambda blokkot. Ebben a blokkban határozható meg, hogyan nézzen ki minden listaelem.
Text(text = item): Egyszerű gyermek komponálható függvény, amely a jelenlegi listaelem szövegét jeleníti meg.

A LazyColumn/LazyRow fő jellemzői:

Hatékonyság: Az elemek csak akkor jönnek létre és komponálódnak, amikor láthatóvá válnak a képernyőn vagy közel vannak a széléhez. Ez csökkenti a memóriafelhasználást és javítja a teljesítményt nagy listák esetén.
Egyszerűség: Egyszerűsített API a RecyclerView-hoz képest, amely nem igényel adapter, ViewHolder vagy ezek életciklusának kezelését.
Komponálás elsőként: Teljes mértékben integrálódik más Compose-függvényekkel.

Használhatjuk az itemsIndexed-et az index eléréséhez minden elemhez:

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")
        }
    }
}

Komplexebb viselkedéshez (például különböző nézet típusok) használhatjuk az items vagy item felülírását:

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 -> {
                    // Itt megjeleníthetsz egy képet, például az Image függvénnyel
                    Text(text = "Image: ${item.url}") // Ideiglenes helykitöltő
                }
            }
        }
    }
}

Hogyan hozzunk létre egy RecyclerView-t a Jetpack Compose-ban?