Scaffold
Nel Material Design, lo scaffold è una struttura fondamentale che fornisce una una piattaforma standardizzata per interfacce utente complesse. Riunisce diversi parti dell'interfaccia utente, come le barre delle app e i pulsanti di azione fluttuanti, offrendo alle app uno aspetto e design coerenti.
Esempio
Il componibile Scaffold
fornisce un'API semplice che puoi utilizzare per
assemblare rapidamente la struttura dell'app seguendo le linee guida di Material Design.
Scaffold
accetta diversi componibili come parametri. Tra questi ci sono
seguenti:
topBar
: la barra delle app nella parte superiore dello schermo.bottomBar
: la barra delle app nella parte inferiore dello schermo.floatingActionButton
: un pulsante che appare sopra l'angolo in basso a destra di la schermata che puoi usare per esporre le azioni chiave.
Per esempi più dettagliati su come implementare le funzionalità "in alto" e "in basso", barre delle app, 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 nelle istanze
componibili.
L'esempio seguente fornisce un esempio completo di come implementare
Scaffold
. Contiene una barra delle app superiore, una barra delle app in basso e un'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:
![Un'implementazione di scaffold che contiene semplici barre dell'app superiore e inferiore, nonché un pulsante di azione mobile che ripete un contatore. Il contenuto interno dello scaffold è un semplice testo che spiega il componente.](https://developer.android.com/static/develop/ui/compose/images/components/scaffold.png?authuser=9&hl=it)