LazyColumn у Jetpack Compose — що це, властивості та як працює

Що таке LazyColumn у Jetpack Compose

LazyColumn — це composable-функція, яка реалізує вертикальний прокручуваний список із лінивим завантаженням. На відміну від Column, який відображає всі дочірні елементи одразу, LazyColumn створює лише елементи, що потрапляють в область перегляду.

Механізм лінивого завантаження в LazyColumn заснований на перевикористанні елементів: коли елемент приховується під час прокручування, його композиція та макет можуть бути перевикористані для нового відображуваного елемента. Це економить пам’ять і процесорний час, особливо на довгих списках.

За даними Android Developers Blog, 2024, LazyColumn може ефективно обробляти списки з десятків тисяч елементів без значного зниження продуктивності. Кожен елемент у LazyColumn має ключ (key), який допомагає Compose ідентифікувати та зберігати стан елемента при змінах списку.

Базова сигнатура LazyColumn

LazyColumn приймає параметри modifier, state, contentPadding, reverseLayout, verticalArrangement та horizontalAlignment. Вміст задається в лямбда-блоці через DSL-функції items та item.

@Composable
fun SimpleLazyColumn() {
    val itemsList = (1..100).toList()
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(16.dp)
    ) {
        items(itemsList) { item ->
            Text(text = "Елемент $item")
        }
    }
}

Параметри LazyColumn: items та item

DSL-блок LazyColumn надає функції items та item для додавання вмісту. items приймає колекцію даних, ключ та функцію-фабрику для створення елементів. item додає один статичний елемент до списку.

itemsIndexed — це варіант items, який передає індекс елемента на додаток до даних. Це корисно, коли потрібно знати позицію елемента без окремого обчислення. items(size) приймає лише кількість елементів та фабрику без прив’язки до колекції.

Параметр key у items унікально ідентифікує кожен елемент. За даними Material Design Guidelines, 2025, ключі покращують продуктивність при оновленні та анімації елементів, оскільки Compose може відстежити переміщення або зміну конкретного елемента за ключем.

Приклад з різними типами елементів

Функція items з contentType дозволяє LazyColumn оптимізувати перевикористання елементів різних типів. У прикладі нижче в одному списку використовуються заголовки секцій та звичайні рядки.

@Composable
fun MixedItemsList() {
    LazyColumn {
        item {
            Text(
                text = "Заголовок",
                style = MaterialTheme.typography.headlineMedium
            )
        }
        items(
            items = (1..20).toList(),
            key = { it },
            contentType = { "item" }
        ) { item ->
            Text(text = "Рядок $item")
        }
    }
}

LazyListState та управління прокручуванням

LazyListState — це об’єкт стану LazyColumn, який відстежує поточну позицію прокручування, перший видимий елемент та зміщення. Він може бути створений через rememberLazyListState() та переданий у параметр state LazyColumn.

LazyListState надає методи animateScrollToItem та scrollToItem для програмного прокручування до певного елемента. animateScrollToItem створює плавну анімацію прокручування, а scrollToItem прокручує миттєво. Обидва методи вимагають виклику всередині корутини в CompositionContext.

За даними Android Developers, 2024, LazyListState також містить layoutInfo, який надає інформацію про видимі елементи — їх індекси, зміщення та розміри. Це корисно для реалізації аналітики, відстеження переглядів або нескінченного прокручування.

Приклад із програмним прокручуванням

У цьому прикладі LazyColumn керується через LazyListState. Кнопка прокручує список до елемента з індексом 50 з плавною анімацією.

@Composable
fun ScrollableList() {
    val listState = rememberLazyListState()
    val scope = rememberCoroutineScope()

    Column {
        Button(
            onClick = {
                scope.launch {
                    listState.animateScrollToItem(50)
                }
            }
        ) {
            Text("Прокрутити до 50")
        }

        LazyColumn(state = listState) {
            items((1..100).toList()) { item ->
                Text(
                    text = "Елемент $item",
                    modifier = Modifier.padding(8.dp)
                )
            }
        }
    }
}

Оптимізація продуктивності LazyColumn

Ключовий фактор продуктивності LazyColumn — правильне використання ключів. Кожен елемент повинен мати унікальний стабільний ключ через параметр key. Без ключів Compose не може коректно перевикористовувати елементи при зміні даних, що призводить до перекомпонування.

contentType повідомляє LazyColumn, які елементи мають однаковий тип макету. Коли два елементи з однаковим contentType потрапляють в область переробки, LazyColumn може перевикористовувати їх макет без перекомпонування. За даними Android Developers Blog, 2024, contentType покращує продуктивність на 30–50% у списках з різними типами елементів.

Для LazyColumn також важливо уникати нестабільних параметрів у функціях-фабриках. Щоразу, коли параметр елемента змінюється, Compose перекомпоновує цей елемент. Використання remember та derivedStateOf для стабільних значень знижує кількість перекомпонувань.

Таблиця факторів продуктивності

Sticky headers та секції в LazyColumn

stickyHeader — це функція DSL LazyColumn, яка закріплює заголовок секції у верхній частині списку під час прокручування. Коли наступна секція доходить до верху, її заголовок замінює поточний. Ця поведінка знайома користувачам за списками контактів та календарями.

stickyHeader приймає ключ та функцію-фабрику, аналогічно item. На відміну від звичайного item, stickyHeader залишається видимим під час прокручування вмісту своєї секції. Коли секція повністю прокручена, заголовок наступної секції витісняє попередній.

За даними Material Design Guidelines, 2025, sticky header покращує навігацію в довгих списках та знижує когнітивне навантаження на користувача. Для реалізації sticky header достатньо обернути заголовок секції в stickyHeader у правильній позиції відносно елементів items.

@Composable
fun SectionedList(sections: Map<String, List<String>>) {
    LazyColumn {
        sections.forEach { (header, items) ->
            stickyHeader {
                Text(
                    text = header,
                    modifier = Modifier.background(Color.White)
                        .padding(16.dp)
                )
            }
            items(items) { item ->
                Text(text = item, modifier = Modifier.padding(8.dp))
            }
        }
    }
}