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(), ) } } }
Questa implementazione si presenta come segue: