Superficies en Jetpack Compose Glimmer

Dispositivos de realidad extendida correspondientes
Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de realidad extendida.
Más información sobre los tipos de dispositivos de realidad extendida →
Display Glasses
Más información sobre los tipos de dispositivos de realidad extendida →

En Jetpack Compose Glimmer, el componente surface es un componente básico fundamental que representa un área visual distinta o un límite físico para componentes como botones y tarjetas.

Una superficie es responsable de las siguientes propiedades visuales y físicas:

  • Recorte: Recorta sus elementos secundarios en una forma especificada.
  • Borde: Dibuja un borde interno para enfatizar el límite del componente. Cuando está enfocado, dibuja un borde más ancho con un resaltado de enfoque.
  • Fondo: Aplica un color de fondo al área de la superficie.
  • Efectos de profundidad: Renderiza sombras de DepthEffect según el estado del componente (por ejemplo, predeterminado o enfocado).
  • Color de contenido: Proporciona un color para el texto y los íconos dentro de la superficie, que se calcula de forma predeterminada a partir del color de fondo.
  • Estados de interacción: Dibuja una capa superpuesta presionada cuando se presiona la superficie y un borde más ancho con un resaltado cuando se enfoca.

Ejemplo: Crea una superficie

El siguiente código crea una superficie con recorte, un fondo y bordes predeterminados:

@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")
    }
}

Puntos clave sobre el código

  • Fuente de interacción compartida: Ambas .surface() y .clickable() debe compartir el mismo interactionSource. Esto garantiza que los estados visuales (como la presión o el enfoque) se sincronicen, lo que permite que la superficie reaccione visualmente a la entrada del usuario.

  • Orden de los modificadores: La secuencia de los modificadores es fundamental. Porque .surface() corta un diseño y lo coloca antes .clickable() garantiza que el objetivo táctil esté restringido a la forma de la superficie. Si .clickable() viene primero, el área de interacción podría extenderse más allá de los límites visibles y recortados del componente.

SurfaceDepthEffect

La clase SurfaceDepthEffect administra la transición de sombras entre estados de interacción:

  • depthEffect: Es el efecto de sombra que se usa cuando la superficie está en su estado predeterminado.
  • focusedDepthEffect: Es el efecto de sombra que se usa cuando la superficie está enfocada.