Ponteggio

In Material Design, uno scaffold è una struttura fondamentale che fornisce una piattaforma standardizzata per interfacce utente complesse. Raggruppa diverse parti dell'interfaccia utente, come barre delle app e pulsanti di azione mobili, dando alle app un aspetto e un design coerenti.

Esempio

L'elemento componibile Scaffold fornisce un'API semplice che puoi usare per assemblare rapidamente la struttura della tua app in base alle linee guida di Material Design. Scaffold accetta diversi elementi componibili come parametri. Tra questi:

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

Per esempi più dettagliati su come implementare le barre dell'app superiore e inferiore, consulta la pagina Barre dell'app.

Puoi anche trasmettere i contenuti Scaffold come faresti ad altri contenitori. Trasmette un valore innerPadding alla funzione lambda content che puoi utilizzare successivamente nei componibili secondari.

L'esempio seguente fornisce un esempio completo di come potresti implementare Scaffold. Contiene una barra dell'app superiore, una barra inferiore dell'app 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 si presenta come segue:

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

Risorse aggiuntive