Schede 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 →
Occhiali con display
Scopri di più sui tipi di dispositivi XR →

In Jetpack Compose Glimmer, il componente Card funge da contenitore principale per i contenuti correlati, creando un limite visivo chiaro per le unità di informazioni facilmente comprensibili. Le card sono altamente adattabili e supportano combinazioni di contenuti principali, titoli facoltativi, sottotitoli e icone iniziali o finali. Per impostazione predefinita, le card occupano la larghezza massima disponibile, sono selezionabili e puoi anche renderle cliccabili. Le card supportano una disposizione verticale in cui l'immagine dell'intestazione è in alto, seguita dal titolo, dal sottotitolo e dal corpo del contenuto.

Le card sono basate sul sistema di superfici di Jetpack Compose Glimmer, quindi ereditano proprietà fisiche come effetti di profondità, ritaglio e evidenziazioni dei bordi coerenti.

Figura 1. Un esempio di alcuni stili diversi di card in Jetpack Compose Glimmer.

Anatomia e slot

Una card di Jetpack Compose Glimmer è composta da diversi elementi specializzati che ti consentono di personalizzare i contenuti e il layout.

Slot Descrizione

Intestazione

La sezione superiore della card, progettata per contenere un'immagine.

Titolo e sottotitolo

Questi campi di testo forniscono le etichette principali e secondarie per la card. Il titolo viene posizionato sopra il sottotitolo.

Icona iniziale

Un'icona facoltativa (in genere un Icon) che viene visualizzata all'inizio dell'area dei contenuti della card.

Icona finale

Un'icona facoltativa che viene visualizzata alla fine dell'area dei contenuti della card.

Azione

Uno spazio per un elemento interattivo principale, ad esempio un Button.

Contenuti principali

Il corpo principale della card per Text o contenuti principali.

Valori predefiniti delle card

I seguenti valori predefiniti si applicano alle card:

  • Larghezza: le card occupano la larghezza massima disponibile del display per ottimizzare la leggibilità sugli occhiali con display.
  • Altezza minima: 80.dp
  • Spaziatura verticale del testo: 3.dp
  • Forma dell'intestazione: utilizza RoundedCornerShape con angoli di 24.dp
  • Padding dei contenuti: il valore predefinito è GlimmerTheme.componentSpacingValues.medium. Questo influisce sul padding più esterno intorno alle immagini dell'intestazione e al contenitore dei contenuti.
  • Forma: il valore predefinito è GlimmerTheme.shapes.medium.

  • Rendering del testo: utilizza i valori predefiniti di GlimmerTheme.typography per i seguenti slot:

Esempio: card di base

Il seguente codice crea una card di base:

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}

Esempio: card complessa con più slot

Il seguente codice mostra come utilizzare più slot insieme per creare una card.

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}

Punti chiave sul codice

  • Mostra come utilizzare vari elementi della card, come header, title, leadingIcon e action, per personalizzare i contenuti e la struttura della card.
  • Utilizza l'overload Card standard con un'azione perché solo la card (o la sua azione interna) deve essere selezionabile. Se devi rendere interattiva l'intera superficie della card, utilizza l'overload conCard onClick invece.
  • Questa card utilizza uno slot di azione, quindi la superficie della card non è selezionabile e la selezione viene indirizzata al pulsante di azione.