Sobes.tech
Middle

Kaip sukurti RecyclerView Jetpack Compose?

sobes.tech AI

Atsakymas iš AI

Jetpack Compose nėra RecyclerView tradiciniame supratime. Sąrašų rodymui naudojami LazyColumn (vertikaliems sąrašams) ir LazyRow ( horizontaliems sąrašams). Jie užtikrina panašią efektyvumą, naudojant elementų pakartotinį naudojimą.

LazyColumn pavyzdys:

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

Analizė:

  • LazyColumn: Komponuojama funkcija, kuri rodo elementus vertikaliame sąraše, sukurdama juos pagal poreikį.
  • items(itemsList) { item -> ... }: Išplėtimas LazyListScope, leidžiantis pereiti per duomenų sąrašą (itemsList) ir kiekvienam elementui (item) iškviesti pateiktą Composable lambda bloką. Šiame bloke nustatoma, kaip atrodys kiekvienas sąrašo elementas.
  • Text(text = item): Paprasta vaikų komponentė, rodanti teksto turinį.

Pagrindinės LazyColumn/LazyRow savybės:

  • Efektyvumas: Elementai kuriami ir komponuojami tik tada, kai jie tampa matomi ekrane arba yra arti krašto. Tai sumažina atminties naudojimą ir pagerina našumą dideliuose sąrašuose.
  • Paprastumas: Supaprastintas API, lyginant su RecyclerView, nereikalaujantis sukurti adapterio, ViewHolder ir valdyti jų gyvavimo ciklą.
  • Komponuojamas pirmas: Pilnai integruojasi su kitomis Compose funkcijomis.

Galite naudoti itemsIndexed, kad pasiektumėte kiekvieno elemento indeksą:

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

Daugiau sudėtingo elgesio (pavyzdžiui, skirtingų vaizdų tipų) galima pasiekti per perkrovimą items arba 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 -> {
                    // Čia galite parodyti vaizdą, pvz., naudodami Image funkciją
                    Text(text = "Image: ${item.url}") // Užkulisiai
                }
            }
        }
    }
}