Урок 11: Lazy Column – ленивые списки (сравнение с RecyclerView)

Введение

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LessonsListScreen() {

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Назад") },
                navigationIcon = {
                    IconButton(onClick = { }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.KeyboardArrowLeft,
                            contentDescription = "Back Button",
                        )
                    }
                }
            )
        },
        content = { paddingValues ->
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(paddingValues)
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text(
                        text = "Бесплатный курс",
                        style = MaterialTheme.typography.headlineSmall
                    )
                    Spacer(modifier = Modifier.height(8.dp))
                    Text(
                        text = "Kotlin для начинающих",
                        style = MaterialTheme.typography.headlineLarge
                    )
                    Spacer(modifier = Modifier.height(16.dp))
                    Button(
                        shape = RoundedCornerShape(13.dp),
                        onClick = {},
                        modifier = Modifier
                            .height(56.dp)
                            .padding(horizontal = 40.dp)
                            .fillMaxWidth()
                    ) {
                        Text(
                            text = "Начать",
                            style = MaterialTheme.typography.labelMedium
                        )
                    }
                }

                Spacer(modifier = Modifier.height(50.dp))

                Text(
                    text = "Содержание курса",
                    style = MaterialTheme.typography.headlineMedium.copy(
                        fontSize = 18.sp,
                        fontFamily = FontFamily(Font(R.font.gilroy_semibold)),
                    ),
                    modifier = Modifier.padding(horizontal = 16.dp)
                )

                Spacer(modifier = Modifier.height(16.dp))
            }
        }
    )
}

Реализация статичного списка

Column {
    repeat(50) { index ->
        Text(
            text = "${index + 1}",
            modifier = Modifier
                .padding(start = 20.dp)
                .fillMaxWidth(),
            fontSize = 24.sp
        )
    }
}

• Первая проблема – такой список не скроллится. Column по умолчанию не обладает этим свойством. То есть мы просто вывели по порядку какие-то значения. Но это решается добавлением для колонки модификатора verticalScroll, который принимает обязательный параметр ScrollState. Это нужно, чтобы состояние скролла не сбрасывалось в момент рекомпозиции. Поэтому мы создаем переменную со стейтом и запоминаем его с помощью специальной функции rememberScrollState(). Проверяем и пока все хорошо – наш список стал теперь успешно скроллится.

val scrollState = rememberScrollState()

Column(
    modifier = Modifier.verticalScroll(scrollState)
) {
    repeat(50000) { index ->
        Text(
            text = "${index + 1}",
            modifier = Modifier
                .padding(start = 20.dp)
                .fillMaxWidth(),
            fontSize = 24.sp
        )
    }

• Вторая проблема – и это ключевое, мы сейчас создали все 50 элементов одновременно. Пока они у нас легковесные – это просто цифры, но когда здесь будет рендериться гораздо больше объектов и они будут более сложные – приложение начнет тормозить или вовсе упадет с ошибкой. Проверить это очень просто. Давайте попробуем отрисовать 50.000 элементов. После запуска мы видим заметное увеличение времени запуска приложения, а потом и вовсе получили краш. Открою консоль с фильтрацией логов по уровню error и увидим там ошибку OutOfMemoryError.

Принцип работы RecyclerView

Реализация Lazy Column в Jetpack Compose

Почему в обычной Column можно писать любые Text(), Button(), Box(), а в LazyColumn это не работает?

• Column (или Row) — это простой контейнер: он сразу создаёт и раскладывает все переданные ему дочерние Composable. ColumnScope позволяет размещать любые composable элементы, но только в ряд.
• LazyColumn (или LazyRow) — это “ленивый” список. Его задача – не создавать сразу все элементы. Но чтобы LazyColumn понимала, сколько у нас элементов, какие у них ключи и как их «доставать» по мере скролла, создан специальный DSL. LazyListScope содержит ограниченный набор функций: item { ... }, items(...), stickyHeader(...). Вот они все перечислены в интерфейсе скоупа.

Разбор функций скоупа LazyListScope

LazyColumn {

    items(50000) { index ->
        Text(
            text = "${index + 1}",
            modifier = Modifier
                .padding(start = 20.dp)
                .fillMaxWidth(),
            fontSize = 24.sp
        )
    }
}

Функция stickyHeader

LazyColumn {

    stickyHeader {
        Text(
            text = "Заголовок раздела",
            modifier = Modifier
                .fillMaxWidth()
                .background(Color.LightGray)
                .padding(8.dp),
        )
    }

    items(50) { index ->
        Text(
            text = "${index + 1}",
            modifier = Modifier
                .padding(start = 20.dp)
                .fillMaxWidth(),
            fontSize = 24.sp
        )
    }
    
}

itemsIndexed

	val lessons = listOf("Урок 1", "Урок 2", "Урок 3")

LazyColumn {
    itemsIndexed(lessons) { index, lesson ->
        Text(
            text = "${index + 1}. $lesson",
						modifier = Modifier
			          .padding(start = 20.dp)
		            .fillMaxWidth(),
            fontSize = 24.sp
        )
    }
}