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 →

Más información sobre los tipos de dispositivos de realidad extendida →

En Jetpack Compose Glimmer, el surface componente 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:

• Clipping: Recorta sus elementos secundarios a una forma especificada.
• Border: Dibuja un borde interior para enfatizar el límite del componente. Cuando está enfocado, dibuja un borde más ancho con un resaltado enfocado.
• Fondo: Aplica un color de fondo al área de la superficie.
• Efectos de profundidad: Renderiza sombras DepthEffect según el estado del componente (como el predeterminado en comparación con el enfocado).
• Color del 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.
• Interaction States: Dibuja una superposición presionada cuando se presiona la superficie y un borde más ancho con un resaltado cuando está enfocado.

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

Interacción y enfoque

Las superficies no son enfocables de forma predeterminada, por lo que los usuarios no pueden interactuar con ellas. En la mayoría de los casos, las superficies deben ser interactivas para permitir que los usuarios muevan el enfoque y naveguen entre los componentes de manera coherente. Puedes usar el modificador focusable de Compose para las superficies que solo deben ser enfocables. Del mismo modo, puedes crear una superficie en la que se pueda hacer clic con el modificador clickable de Compose. También puedes usar otros modificadores para las superficies que requieren acciones.

En el siguiente código, se muestran ejemplos de superficies enfocables y en las que se puede hacer clic:

@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

Puntos clave sobre el código

• Fuente de interacción compartida para superficies enfocables: Tanto .surface() y .focusable() deben compartir la misma interactionSource. Esto permite que la superficie reaccione a los cambios de enfoque.

• Fuente de interacción compartida para superficies en las que se puede hacer clic: Tanto .surface() y .clickable() deben compartir la misma interactionSource. Esto garantiza que los estados visuales (como presionar o enfocar) estén sincronizados, lo que permite que la superficie reaccione visualmente a la entrada del usuario.

• Orden de los modificadores: La secuencia de modificadores es fundamental. Debido a que .surface() recorta un diseño, colocarlo antes de .clickable() garantiza que el objetivo táctil esté restringido a la forma de la superficie. Si .clickable() aparece 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 las sombras entre los 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.