Superfici in Jetpack Compose Glimmer

Dispositivi XR applicabili

Queste indicazioni ti aiutano a creare esperienze per questi tipi di dispositivi XR.

Scopri di più sui tipi di dispositivi XR →

Scopri di più sui tipi di dispositivi XR →

In Jetpack Compose Glimmer, il componente surface è un componente di base fondamentale che rappresenta un'area visiva distinta o un limite fisico per componenti come pulsanti e schede.

Una superficie è responsabile delle seguenti proprietà visive e fisiche:

• Ritaglio: ritaglia i relativi elementi secondari in una forma specificata.
• Bordo: disegna un bordo interno per enfatizzare il limite del componente. Quando è selezionato, disegna un bordo più ampio con un'evidenziazione di selezione.
• Sfondo: applica un colore di sfondo all'area della superficie.
• Effetti di profondità: esegue il rendering delle ombre DepthEffect in base allo stato del componente (ad esempio predefinito rispetto a selezionato).
• Colore dei contenuti: fornisce un colore per il testo e le icone all'interno della superficie, calcolato per impostazione predefinita dal colore di sfondo.
• Stati di interazione: disegna una sovrapposizione premuta quando la superficie viene premuta e un bordo più ampio con un'evidenziazione quando è selezionata.

Esempio: creare una superficie

Il seguente codice crea una superficie con ritaglio, uno sfondo e bordi predefiniti:

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

Interazione e selezione

Le superfici non sono selezionabili per impostazione predefinita, quindi gli utenti non possono interagire con loro. Nella maggior parte dei casi, le superfici devono essere interattive per consentire agli utenti di spostare costantemente lo stato attivo e navigare tra i componenti. Puoi utilizzare il modificatore focusable di Compose per le superfici che devono essere selezionabili. Allo stesso modo, puoi creare una superficie su cui è possibile fare clic utilizzando il modificatore clickable di Compose. Puoi anche utilizzare altri modificatori per le superfici che richiedono azioni.

Il seguente codice mostra esempi di superfici selezionabili e su cui è possibile fare 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

Punti chiave sul codice

• Origine di interazione condivisa per le superfici selezionabili: sia .surface() sia .focusable() devono condividere la stessa interactionSource. In questo modo, la superficie reagisce alle modifiche dello stato attivo.

• Origine di interazione condivisa per le superfici su cui è possibile fare clic: sia .surface() sia .clickable() devono condividere la stessa interactionSource. In questo modo, gli stati visivi (ad esempio premuto o selezionato) vengono sincronizzati, consentendo alla superficie di reagire visivamente all'input dell'utente.

• Ordine dei modificatori: la sequenza dei modificatori è fondamentale. Poiché .surface() ritaglia un layout, se lo posizioni prima di .clickable(), il touch target è vincolato alla forma della superficie. Se .clickable() viene prima, l'area di interazione potrebbe estendersi oltre i limiti visibili e ritagliati del componente.

SurfaceDepthEffect

La classe SurfaceDepthEffect gestisce la transizione delle ombre tra gli stati di interazione:

• depthEffect: l'effetto ombra utilizzato quando la superficie è nello stato predefinito.
• focusedDepthEffect: l'effetto ombra utilizzato quando la superficie è selezionata.