10 трюков Jetpack Compose, о которых вы, вероятно, не знаете

Jetpack Compose произвел революцию в разработке пользовательских интерфейсов для Android благодаря своему декларативному и интуитивно понятному подходу. Но даже для опытных разработчиков многие мощные функции и скрытые жемчужины остаются незамеченными. В этой статье мы рассмотрим 10 недооцененных или малоизвестных трюков с пользовательским интерфейсом в Jetpack Compose, которые помогут вам создавать более эффективные, красивые и удобные в обслуживании пользовательские интерфейсы.

Давайте погрузимся в эту тему.

1. Анимируйте видимости с помощью переходов Enter/Exit

Вместо того чтобы переключать видимость с помощью if (visible) Box {}, вы можете использовать AnimatedVisibility для чистой анимации входа и выхода.

AnimatedVisibility(
    visible = showDetails,
    enter = fadeIn() + slideInVertically(),
    exit = fadeOut() + slideOutVertically()
) {
    Text("Here's a smooth transition")
}

Почему это важно: это избавляет от необходимости ручной обработки анимации и мгновенно улучшает UX.

2. Используйте модификатора Layout для создания кастомных макетов

Иногда стандартных Row, Column и Box недостаточно. Тогда на помощь приходит модификатор Modifier.layout.

Modifier.layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)
    layout(placeable.width, placeable.height) {
        // Flip layout horizontally
        placeable.placeRelative(-placeable.width, 0)
    }
}

Пример использования: создание зеркальных макетов, переворачивание компонентов или нестандартное расположение UI.

3. Разделяйте элементы в LazyColumn

Хотите вставить разделитель или пробел между каждым элементом?

LazyColumn {
    itemsIndexed(items) { index, item ->
        Text(item)
        if (index != items.lastIndex) {
            Divider()
        }
    }
}

Бонус: вы можете не ограничиваться разделителями, а вставлять между рядами рекламу, советы или информационный контент.

4. Используйте drawBehind для расширения фонового рисунка за пределы границ

Функция drawBehind позволяет рисовать за макетом компонента, игнорируя отступы или даже рисуя за пределами границ.

Modifier
    .padding(16.dp)
    .drawBehind {
        drawRect(Color.Gray)
    }

Пример: добавьте тень или градиентный фон, выходящий за границы содержимого.

5. Закрепляйте заголовки в LazyColumn с помощью stickyHeader

Jetpack Compose имеет нативную поддержку «липких» заголовков:

LazyColumn {
    stickyHeader {
        Text(
            "Section Title",
            modifier = Modifier.background(Color.White)
        )
    }
    items(data) {
        Text(it)
    }
}

Отлично подходит для: групповых списков (например, контакты A-Z), разделов чата по дате и т.д.

6. Используйте rememberUpdatedState, чтобы избежать устаревших лямбд

Если вы передаете в Composable лямбду, которая может измениться, rememberUpdatedState гарантирует, что вы используете последнюю версию.

val updatedOnClick by rememberUpdatedState(newValue = onClick)
LaunchedEffect(Unit) {
    delay(1000)
    updatedOnClick()
}

Без этого Compose может вызвать старую версию лямбды, что приведет к ошибкам.

7. Не забывайте о pointerInput для кастомных жестов

Выйдете за пределы clickable — используйте перетаскивание, мультитач или собственное распознавание сложных жестов.

Modifier.pointerInput(Unit) {
    detectTapGestures(
        onLongPress = { /* do something */ }
    )
}

Можно также обнаружить масштабирование с помощью щипков, смахивание или реализовать распознавание кастомных жестов.

8. Прокручивайте любой компонент с помощью Modifier.scrollable

Хотите прокрутить бокс или кастомный макет? Вам не нужно использовать LazyColumn или Column.

val scrollState = rememberScrollState()
Box(
    Modifier
        .height(200.dp)
        .verticalScroll(scrollState)
) {
    // Large content goes here
}

Также работает с горизонтальными прокрутками или вложенными скролами с помощью NestedScrollConnection.

9. Используйте CompositionLocal для тематического поведения

Вместо глубокой передачи параметров используйте CompositionLocal для обмена такими значениями, как интервал или предпочтения пользователя.

val LocalSpacing = compositionLocalOf { 0.dp }

CompositionLocalProvider(LocalSpacing provides 8.dp) {
    MyComposable()
}
@Composable
fun MyComposable() {
    val spacing = LocalSpacing.current
    Spacer(modifier = Modifier.height(spacing))
}

Идеально подходит для согласования таких элементов дизайна, как интервалы, цвета или размеры шрифтов в больших кодовых базах.

10. Используйте Modifier.graphicsLayer для создания эффектов

graphicsLayer предоставляет вам низкоуровневый контроль для применения таких эффектов, как вращение, масштабирование или альфа-канал, прямо на GPU.

Modifier.graphicsLayer {
    rotationZ = 15f
    scaleX = 1.2f
    alpha = 0.8f
}

Используйте с осторожностью: эти эффекты хорошо работают на графических процессорах, но проверяйте производительность на устройствах более низкого класса.

Заключительные мысли

Jetpack Compose — это не просто современный набор инструментов для создания пользовательского интерфейса, это мощный холст для творчества. Многие разработчики придерживаются базовых принципов, но истинная сила Compose заключается в освоении его менее документированных трюков, основанных на композитном подходе.

Источник