Давайте разберем, как использовать LazyColumn с несколькими типами элементов в одном списке и показать пример его работы.

Пример работы LazyColumn с несколькими типами элементов

Допустим, у нас есть список данных, в котором могут быть заголовки (типа String) и элементы (типа Item). Мы хотим отобразить их с помощью LazyColumn, где заголовки и элементы будут иметь разное оформление.

1. Определяем данные

Создаем класс для элемента списка:

data class Item(
    val id: Int,
    val name: String
)

Список данных может выглядеть так:

val listData = listOf(
    "Заголовок 1",
    Item(1, "Первый элемент"),
    Item(2, "Второй элемент"),
    "Заголовок 2",
    Item(3, "Третий элемент"),
    Item(4, "Четвертый элемент")
)

2. Реализация LazyColumn

Используем LazyColumn с блоком items для отображения различных типов элементов:

@Composable
fun MultiTypeList(data: List<Any>) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(data) { item ->
            when (item) {
                is String -> { // Заголовок
                    HeaderItem(title = item)
                }
                is Item -> { // Обычный элемент
                    ListItem(item = item)
                }
            }
        }
    }
}

@Composable
fun HeaderItem(title: String) {
    Text(
        text = title,
        style = MaterialTheme.typography.h5,
        modifier = Modifier
            .fillMaxWidth()
            .background(Color(0xFFE0E0E0))
            .padding(16.dp)
    )
}

@Composable
fun ListItem(item: Item) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        elevation = 4.dp
    ) {
        Text(
            text = item.name,
            style = MaterialTheme.typography.body1,
            modifier = Modifier.padding(16.dp)
        )
    }
}

3. Вызов функции MultiTypeList

В MainActivity вызываем нашу функцию, передавая список данных:

@Composable
fun MainScreen() {
    val listData = listOf(
        "Заголовок 1",
        Item(1, "Первый элемент"),
        Item(2, "Второй элемент"),
        "Заголовок 2",
        Item(3, "Третий элемент"),
        Item(4, "Четвертый элемент")
    )

    MultiTypeList(data = listData)
}

Результат

1. Заголовки (String) будут отображаться с серым фоном и увеличенным шрифтом.

2. Элементы списка (Item) будут отображаться в карточках с нормальным шрифтом.

Особенности реализации

• items: Позволяет проходить по каждому элементу списка и отображать его.

• when: Проверяет тип данных элемента (String или Item) и вызывает соответствующий @Composable.

• UI оформление: Для каждого типа элемента вы задаете уникальное оформление (заголовки, карточки и т. д.).

Если у вас есть другие типы элементов или специфичные данные, вы просто добавляете новые условия в блок when.