Поверхности в 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")
    }
}

Interaction and Focus

Surfaces aren't focusable by default, so users can't interact with them. In most cases, surfaces should be interactive to let users consistently move focus and navigate between components. You can use the Compose focusable modifer for surfaces that are only intended to be focusable, or the Compose clickable modifer and other modifiers for surfaces that require actions.

You can create a focusable surface by combining a surface modifier with the focusable modifier:

@Composable
fun FocusableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier.surface(
                // Provide the same interaction source here and to focusable to make sure that
                // surface appears focused when interacted with.
                interactionSource = interactionSource
            )
            .focusable(interactionSource = interactionSource)
            .padding(horizontal = 24.dp, vertical = 20.dp)
    ) {
        Text("This is a focusable surface")
    }
}

Key points about the code

  • Shared interaction source: Both .surface() and .focusable() must share the same interactionSource. This lets the surface react to focus changes.

Similarly, you can create a clickable surface:

@Composable
fun ClickableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier.surface(
                // Provide the same interaction source here and to clickable to make sure that
                // surface appears focused and pressed when interacted with
                interactionSource = interactionSource
            )
            .clickable(interactionSource = interactionSource, onClick = {})
            .padding(horizontal = 24.dp, vertical = 20.dp)
    ) {
        Text("This is a clickable surface")
    }
}

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

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

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

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

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

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