Scaffold

In Material Design, uno scafo è una struttura di base che fornisce una piattaforma standardizzata per interfacce utente complesse. Tiene insieme diverse parti dell'interfaccia utente, come le barre delle app e i pulsanti di azione flottanti, conferendo alle app un aspetto coerente.

Esempio

Il composable Scaffold fornisce un'API semplice che puoi utilizzare per assemblare rapidamente la struttura della tua app in base alle linee guida di Material Design. Scaffold accetta diversi composibili come parametri. tra cui:

  • topBar: la barra delle app nella parte superiore dello schermo.
  • bottomBar: la barra delle app nella parte inferiore dello schermo.
  • floatingActionButton: un pulsante che viene visualizzato quando passi il mouse sopra l'angolo in basso a destra dello schermo e che puoi utilizzare per visualizzare le azioni principali.

Per esempi più dettagliati su come implementare le barre delle app sia in alto che in basso, consulta la pagina delle barre delle app.

Puoi anche passare i contenuti Scaffold come faresti con altri contenitori. Trasmette un valore innerPadding alla funzione lambda content che puoi poi utilizzare nei composabili secondari.

L'esempio seguente fornisce un esempio completo di come implementare Scaffold. Contiene una barra dell'app superiore, una barra dell'app inferiore e un pulsante di azione mobile che interagisce con lo stato interno di Scaffold.

@Composable
fun ScaffoldExample() {
    var presses by remember { mutableIntStateOf(0) }

    Scaffold(
        topBar = {
            TopAppBar(
                colors = topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Top app bar")
                }
            )
        },
        bottomBar = {
            BottomAppBar(
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                contentColor = MaterialTheme.colorScheme.primary,
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = "Bottom app bar",
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { presses++ }) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            Text(
                modifier = Modifier.padding(8.dp),
                text =
                """
                    This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.

                    It also contains some basic inner content, such as this text.

                    You have pressed the floating action button $presses times.
                """.trimIndent(),
            )
        }
    }
}
Scaffold.kt

Questa implementazione è visualizzata come segue:

Un'implementazione di uno scheletro che contiene semplici barre dell'app superiore e inferiore, nonché un pulsante di azione mobile che esegue l'iterazione di un contatore. Il contenuto interno dello schema è un semplice testo che spiega il componente.
Figura 1. Un'implementazione di scaffold.

Risorse aggiuntive