Kuidas luua RecyclerView Jetpack Compose'is?

Jetpack Compose'is ei ole RecyclerView traditsioonilises mõttes. Listide kuvamiseks kasutatakse LazyColumn (vertikaalsete listide jaoks) ja LazyRow (horisontaalsete listide jaoks). Need pakuvad sarnast tõhusust, taaskasutades elemente.

LazyColumn näide:

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üüs:

• LazyColumn: Komponeeritav funktsioon, mis kuvab elemente vertikaalses listis, luues need vastavalt vajadusele.
• items(itemsList) { item -> ... }: Laiendus LazyListScope-ile, mis võimaldab iteratsiooni andmete nimekirjas (itemsList) ja iga elemendi (item) jaoks kutsuda esile antud Composable lambda-bloki. Selles blokis määratletakse, kuidas iga listi element välja näeb.
• Text(text = item): Lihtne lapsekomponent, mis kuvab praeguse elemendi teksti.

LazyColumn/LazyRow peamised omadused:

• Tõhusus: Elemendid luuakse ja komponenditakse ainult siis, kui nad muutuvad nähtavaks ekraanil või on lähedal äärele. See vähendab mälu kasutust ja parandab jõudlust suurte listide puhul.
• Lihtsus: Lihtsustatud API võrreldes RecyclerView-ga, mis ei nõua adapteri, ViewHolderi loomist ja elutsükli haldamist.
• Komponendipõhine: Täielikult integreeritud teiste Compose funktsioonidega.

Võite kasutada itemsIndexed, et pääseda iga elemendi indeksile:

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

Süvendatud käitumise jaoks (näiteks erinevat tüüpi vaateid) saab kasutada items või item ülekoormust:

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 -> {
                    // Siin saab näidata pilti, näiteks Image funktsiooni abil
                    Text(text = "Image: ${item.url}") // Asendus
                }
            }
        }
    }
}