LazyColumn в Jetpack Compose

LazyColumn — это удобный и производительный способ отображать длинные списки в Jetpack Compose. Он оптимизирован для отображения только тех элементов, которые находятся на экране, экономя память и ресурсы.

Основные особенности LazyColumn

1. Ленивый подход: элементы создаются и отображаются только тогда, когда они попадают в видимую область экрана.

2. Поддержка вертикальной прокрутки: автоматически добавляется прокрутка.

3. Гибкость: можно отображать списки с различными компоновками и кастомизацией.

Основной синтаксис

@Composable
fun MyLazyColumnExample() {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp), // Расстояние между элементами
        contentPadding = PaddingValues(16.dp)           // Внутренние отступы
    ) {
        items(100) { index ->                          // Количество элементов
            Text(
                text = "Item #$index",
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp),
                style = MaterialTheme.typography.body1
            )
        }
    }
}

Основные функции LazyColumn

1. items
   Используется для отображения списка элементов. Работает с коллекциями.

   LazyColumn {
       items(listOf("Apple", "Banana", "Orange")) { fruit ->
           Text(text = fruit, modifier = Modifier.padding(8.dp))
       }
   }
   

2. item
   Для отображения одиночного элемента (например, заголовка или подвала списка).

   LazyColumn {
       item {
           Text("Header", style = MaterialTheme.typography.h6)
       }
       items(5) { index ->
           Text("Item $index")
       }
       item {
           Text("Footer", style = MaterialTheme.typography.h6)
       }
   }
   

3. itemsIndexed
   Позволяет получить доступ к индексу текущего элемента.

   LazyColumn {
       itemsIndexed(listOf("A", "B", "C")) { index, letter ->
           Text("Item $index: $letter")
       }
   }
   

4. LazyListScope
   Поддерживает работу с несколькими типами элементов в одном списке.

Примеры использования

1. Список строк

@Composable
fun SimpleLazyColumn() {
    val items = List(20) { "Item #$it" }
    LazyColumn {
        items(items) { item ->
            Text(
                text = item,
                modifier = Modifier.padding(16.dp),
                style = MaterialTheme.typography.body1
            )
        }
    }
}

2. С кастомной компоновкой

@Composable
fun LazyColumnWithCustomItems() {
    val items = List(10) { "Item #$it" }
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(16.dp)
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp),
                elevation = 4.dp
            ) {
                Text(
                    text = item,
                    modifier = Modifier.padding(16.dp),
                    style = MaterialTheme.typography.body1
                )
            }
        }
    }
}

3. Разные типы элементов

@Composable
fun LazyColumnWithDifferentItems() {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp)
    ) {
        item {
            Text("Header", style = MaterialTheme.typography.h5, modifier = Modifier.padding(8.dp))
        }
        items(5) { index ->
            Text("Item #$index", modifier = Modifier.padding(8.dp))
        }
        item {
            Text("Footer", style = MaterialTheme.typography.h5, modifier = Modifier.padding(8.dp))
        }
    }
}

4. Элементы с изображениями

@Composable
fun LazyColumnWithImages() {
    val items = List(10) { index -> "https://via.placeholder.com/150?text=Item+$index" }
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(16.dp)
    ) {
        items(items) { imageUrl ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Image(
                    painter = rememberImagePainter(data = imageUrl),
                    contentDescription = "Item Image",
                    modifier = Modifier.size(64.dp)
                )
                Spacer(modifier = Modifier.width(8.dp))
                Text(text = "Item with Image", style = MaterialTheme.typography.body1)
            }
        }
    }
}

5. Горизонтальная прокрутка внутри LazyColumn

@Composable
fun NestedLazyColumn() {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp)
    ) {
        items(5) { index ->
            Column {
                Text(text = "Category #$index", style = MaterialTheme.typography.h6)
                LazyRow {
                    items(10) { subIndex ->
                        Card(
                            modifier = Modifier
                                .padding(4.dp)
                                .size(100.dp),
                            elevation = 4.dp
                        ) {
                            Text(
                                text = "Item $subIndex",
                                modifier = Modifier.padding(8.dp),
                                style = MaterialTheme.typography.body2
                            )
                        }
                    }
                }
            }
        }
    }
}

Полезные параметры LazyColumn

1. modifier: позволяет задавать размеры, отступы и прочие свойства.

2. verticalArrangement: задаёт расстояние между элементами (например, spacedBy).

3. horizontalAlignment: выравнивание элементов по горизонтали.

4. contentPadding: отступы внутри списка.

Примечания

• Используйте LazyColumn для длинных списков, так как он производительнее Column.

• В случае небольших списков, где не требуется оптимизация, можно использовать обычный Column.

• Если список содержит сложные элементы, подумайте о рефакторинге кода для повторного использования компонентов.