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 schede sono altamente adattabili e supportano combinazioni di contenuti principali, titoli, sottotitoli e icone iniziali o finali facoltativi. Per impostazione predefinita, le schede occupano la larghezza massima disponibile, sono focalizzabili e puoi anche renderle cliccabili. Le schede supportano una disposizione verticale in cui l'immagine dell'intestazione è in alto, seguita dal titolo, dal sottotitolo e dal corpo del contenuto.

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

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

Anatomia e slot

Una scheda 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 scheda, progettata per contenere un'immagine.

Titolo e sottotitolo

Questi campi di testo forniscono le etichette principali e secondarie per la scheda. 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 scheda.

Icona finale

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

Contenuti principali

Il corpo principale della scheda per Text o contenuti principali.

Valori predefiniti delle schede

I seguenti valori predefiniti si applicano alle schede:

  • Larghezza: le schede 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: scheda di base

Il seguente codice mostra il codice minimo necessario per creare una scheda:

Card { Text("This is a card") }

Esempio: scheda con più slot

Il seguente codice mostra come utilizzare più slot insieme per creare una scheda:

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}

Punti chiave sul codice

  • Mostra come utilizzare vari elementi della scheda, come title, subtitle e leadingIcon, per personalizzare i contenuti e la struttura della scheda.
  • Utilizza l'overload Card con onClick per rendere intera la superficie della scheda.

Schede azione

Se vuoi includere un pulsante di azione con una scheda, utilizza un ActionCard. Le schede azione hanno gli stessi elementi delle schede standard e includono anche un parametro action aggiuntivo che definisce il pulsante in basso.

Figura 2. Un esempio di ActionCard in Jetpack Compose Glimmer.

Esempio: scheda azione di base

Questo codice mostra come creare un ActionCard:

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}

Esempio: scheda azione con un'icona

Questo codice mostra come creare un ActionCard più complesso con le icone:

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}