Sobes.tech
Middle

Kako napraviti RecyclerView u Jetpack Compose?

sobes.tech АИ

Одговор од АИ

У Jetpack Compose нема RecyclerView у традиционном смислу. За приказивање листа користе се LazyColumn (за вертикалне листе) и LazyRow (за хоризонталне листе). Они пружају сличну ефикасност коришћењем поновног коришћења елемената.

Пример коришћења 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)
        }
    }
}

Анализа:

  • LazyColumn: Функција која се компонује и приказује елементе у вертикалној листи, креирајући их по потреби.
  • items(itemsList) { item -> ... }: Проширење за LazyListScope, које омогућава итерацију кроз листу података (itemsList) и за сваки елемент (item) позивајући пружену Composable ламбда функцију. У овом блоку се одређује како ће изгледати сваки елемент листе.
  • Text(text = item): Једноставна подкомпонента која приказује текст тренутног елемента листе.

Кључне особине LazyColumn/LazyRow:

  • Ефикасност: Елементи се креирају и компонују само када постану видљиви на екрану или су близу ивице. Ово смањује потрошњу меморије и побољшава перформансе за велике листе.
  • Једноставност: Поједностављени API у поређењу са RecyclerView-ом, који не захтева креирање адаптера, ViewHolder-а и управљање животним циклусом тих компоненти.
  • Компоновање првенствено: Потпуно се интегрише са другим Compose функцијама.

Може се користити itemsIndexed за приступ индексу сваког елемента:

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

За сложније понашање (на пример, различити типови приказа), може се користити пренатоварење items или 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 -> {
                    // Овде можете приказати слику, на пример помоћу функције Image
                    Text(text = "Image: ${item.url}") // Заменска
                }
            }
        }
    }
}