In Material Design, uno scaffold è una struttura fondamentale che fornisce una piattaforma standardizzata per interfacce utente complesse. Contiene diverse parti dell'interfaccia utente, come le barre delle app e i pulsanti di azione fluttuanti, conferendo alle app un aspetto e uno stile coerenti.
Esempio
Il componibile 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 componibili come parametri. Ecco alcune di queste:
topBar: la barra delle app nella parte superiore dello schermo.bottomBar: la barra delle app nella parte inferiore dello schermo.floatingActionButton: un pulsante che passa il mouse sopra l'angolo in basso a destra dello schermo che puoi utilizzare per visualizzare le azioni chiave.
Per esempi più dettagliati su come implementare le barre dell'app in alto e in basso, consulta la pagina delle barre delle app.
Puoi anche trasferire i contenuti Scaffold come faresti per gli altri contenitori. Passa un valore innerPadding alla lambda content che puoi utilizzare nei componenti componibili figlio.
L'esempio seguente fornisce un esempio completo di come puoi implementare Scaffold. Contiene una barra delle app in alto, in basso 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(),
)
}
}
}
Questa implementazione si presenta nel seguente modo:
