Поверхности в Jetpack Compose Glimmer

Применимые устройства XR

Данное руководство поможет вам создавать приложения для устройств XR такого типа.

Узнайте о типах устройств XR →

Узнайте о типах устройств XR →

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

Поверхность отвечает за следующие визуальные и физические свойства:

• Отсечение : Применяет функцию отсечения к дочерним элементам по заданной форме.
• Граница : Рисует внутреннюю границу, чтобы подчеркнуть контур компонента. При фокусировке рисует более широкую границу с выделенным участком.
• Фон : Применяет фоновый цвет к поверхности.
• Эффекты глубины : Отображает тени DepthEffect в зависимости от состояния компонента (например, в состоянии по умолчанию или в фокусе).
• Цвет содержимого : Задает цвет текста и значков внутри элемента интерфейса, по умолчанию рассчитывается исходя из цвета фона.
• Состояния взаимодействия : При нажатии на поверхность отображается наложенное изображение, а при фокусировке — более широкая рамка с подсветкой.

Пример: Создание поверхности

Следующий код создает поверхность с отсечением, фоном и границами по умолчанию:

@Composable
fun SurfaceSample() {
    Box(Modifier.surface().padding(horizontal = 24.dp, vertical = 20.dp)) {
        Text("This is a surface")
    }
}

Взаимодействие и фокусировка

Поверхности по умолчанию не являются фокусируемыми, поэтому пользователи не могут с ними взаимодействовать. В большинстве случаев поверхности должны быть интерактивными, чтобы пользователи могли последовательно перемещать фокус и перемещаться между компонентами. Для поверхностей, предназначенных только для фокусировки, можно использовать модификатор Compose focusable . Аналогично, с помощью модификатора Compose clickable можно создать кликабельную поверхность. Для поверхностей, требующих действий, можно использовать и другие модификаторы.

Приведенный ниже код демонстрирует примеры как фокусируемых, так и кликабельных поверхностей:

@Composable
fun FocusableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier = Modifier
            .size(100.dp)
            .surface(interactionSource = interactionSource)
            .focusable(interactionSource = interactionSource),
        contentAlignment = Alignment.Center
    ) {
        Text("Focusable")
    }
}

@Composable
fun ClickableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier = Modifier
            .size(100.dp)
            .surface(interactionSource = interactionSource)
            .focusable(interactionSource = interactionSource)
            .clickable(
                interactionSource = interactionSource,
                indication = null
            ) { /* Handle click action */ },
        contentAlignment = Alignment.Center
    ) {
        Text("Clickable")
    }
}
SurfaceSamples.kt

Основные моменты, касающиеся кода.

• Общий источник взаимодействия для фокусируемых поверхностей : методы .surface() и .focusable() должны использовать один и тот же interactionSource . Это позволяет поверхности реагировать на изменения фокуса.

• Общий источник взаимодействия для кликабельных поверхностей : методы .surface() и .clickable() должны использовать один и тот же interactionSource . Это гарантирует синхронизацию визуальных состояний (например, нажатия или фокусировки), позволяя поверхности визуально реагировать на ввод пользователя.

• Порядок модификаторов : Последовательность модификаторов имеет решающее значение. Поскольку .surface() обрезает макет, его размещение перед .clickable() гарантирует, что область касания будет ограничена формой поверхности. Если .clickable() идет первым, область взаимодействия может выйти за видимые, обрезанные границы компонента.

Эффект глубины поверхности

Класс SurfaceDepthEffect управляет переходом теней между состояниями взаимодействия:

• depthEffect : Эффект тени, используемый, когда поверхность находится в своем состоянии по умолчанию.
• focusedDepthEffect : Эффект тени, используемый при фокусировке на поверхности.