Jetpack Compose, набор инструментов декларативного пользовательского интерфейса для Android, завоевал огромную популярность среди разработчиков благодаря своей простоте и универсальности. С выпуском Material 3, новой версии системы Material Design, разработчики получили в свое распоряжение еще более мощные инструменты. В этой статье мы рассмотрим различные методы повышения уровня компонентов в Material 3 Jetpack Compose, а также приведем примеры кода.

Метод 1: использование Modifier.elevation()
Jetpack Compose предоставляет функцию модификатора, называемую Elevation(), которая позволяет вам применять возвышение к компоненту. Этот метод принимает значение, представляющее высоту в dp.

@Composable
fun ElevationExample() {
    Box(
        modifier = Modifier
            .size(200.dp)
            .background(Color.White)
            .elevation(8.dp)
    )
}

Метод 2: использование Surface
Surface — это предопределенный компонент в Jetpack Compose, который можно использовать для повышения высоты его содержимого.

@Composable
fun ElevationExample() {
    Surface(
        modifier = Modifier.size(200.dp),
        elevation = 8.dp
    ) {
        // Content goes here
    }
}

Метод 3. Использование карты.
Карточка – это еще один предопределенный компонент в Jetpack Compose, который автоматически повышает высоту своего содержимого.

@Composable
fun ElevationExample() {
    Card(
        modifier = Modifier.size(200.dp),
        elevation = 8.dp
    ) {
        // Content goes here
    }
}

Метод 4. Применение высоты к пользовательским компонентам.
Если вы хотите применить высоту к пользовательскому компоненту, вы можете использовать функцию Modifier.drawWithContent(), чтобы вручную нарисовать тень вокруг содержимого.

@Composable
fun CustomComponent() {
    Box(
        modifier = Modifier
            .size(200.dp)
            .drawWithContent {
                drawContent()
                drawShadow(elevation = 8.dp)
            }
    )
}

Метод 5: динамическое повышение на основе состояния
Вы также можете применять повышение динамически на основе состояния компонента. Например, вы можете увеличить высоту, когда компонент нажат или находится в фокусе.

@Composable
fun ElevationExample(isPressed: Boolean) {
    val elevation = if (isPressed) 12.dp else 8.dp
    Box(
        modifier = Modifier
            .size(200.dp)
            .background(Color.White)
            .elevation(elevation)
    )
}

Повышение прав играет решающую роль в создании визуально привлекательных и интуитивно понятных пользовательских интерфейсов. В этой статье мы рассмотрели несколько методов применения высоты к компонентам в Material 3 Jetpack Compose. Независимо от того, решите ли вы использовать функцию возвышения (), Surface, Card или рисовать тени вручную, у вас есть возможность создавать потрясающие пользовательские интерфейсы, соответствующие рекомендациям Material Design. Начните экспериментировать с повышением прав в своих проектах Jetpack Compose и поднимите свои пользовательские интерфейсы на новый уровень!