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 →

Scopri di più sui tipi di dispositivi XR →

In Jetpack Compose Glimmer, il componente Card è progettato per raggruppare e visualizzare informazioni correlate in un'unica unità. Le schede sono altamente adattabili, supportano combinazioni di contenuti principali, titoli e sottotitoli facoltativi e icone iniziali o finali. Per impostazione predefinita, le schede occupano tutta la larghezza del display degli occhiali AI, sono selezionabili e possono anche essere rese cliccabili.

Anatomia e slot delle schede

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

• Intestazione: la sezione superiore della scheda, progettata per contenere un'immagine.

• Titolo e sottotitolo: questi campi di testo forniscono le etichette principale e secondaria per la scheda.

• Icona iniziale: un'icona facoltativa 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.

• Azione: uno spazio per un elemento interattivo principale, ad esempio un pulsante. In questo modo, gli utenti possono eseguire un'azione direttamente dalla scheda. Lo slot è disponibile in un overload separato del componente componibile Card.

• Contenuto principale: il corpo principale della scheda, in cui inserisci il testo principale o altri contenuti.

Esempio di base: crea una scheda di base

Puoi creare una scheda molto semplice con pochissimo codice:

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

Esempio dettagliato: visualizzare una scheda complessa

Il seguente codice mostra come utilizzare più slot insieme per creare una scheda. Mostra anche come accoppiare un Card con un TitleChip.

@Composable
fun SampleGlimmerCard() {
    val myHeaderImage = painterResource(id = R.drawable.header_image)
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
        Card(
            action = {
                Button(onClick = {}) {
                    Text("Action Button")
                }
            },
            header = {
                Image(
                    painter = myHeaderImage,
                    contentDescription = "Header image for the card",
                    contentScale = ContentScale.FillWidth
                )
            },
            title = { Text("Card Title") },
            subtitle = { Text("Card Subtitle") },
            leadingIcon = { FavoriteIcon, "Localized description" },
            trailingIcon = { FavoriteIcon, "Localized description" }
        ) {
            Text("A Jetpack Compose Glimmer Card using all available slots")
        }
    }
}

Punti chiave sul codice

• Mostra come utilizzare vari elementi delle schede, ad esempio header, title, subtitle, leadingIcon e action, per personalizzare i contenuti e la struttura della scheda.
• Mostra un esempio di come inserire un TitleChip e utilizzare un Spacer.