Scaffold
Dans Material Design, un échafaudage est une structure fondamentale qui fournit une plate-forme standardisée pour des interfaces utilisateur complexes. Il rassemble différents de l'interface utilisateur, telles que les barres d'application et les boutons d'action flottants, offrant aux applications une apparence cohérente.
Exemple
Le composable Scaffold
fournit une API simple que vous pouvez utiliser pour
d'assembler rapidement la structure de votre application en respectant les consignes Material Design.
Scaffold
accepte plusieurs composables en tant que paramètres. En voici quelques exemples :
suivantes:
topBar
: barre d'application en haut de l'écran.bottomBar
: barre d'application en bas de l'écran.floatingActionButton
: bouton survolé en bas à droite de l'écran que vous pouvez utiliser pour exposer les actions clés.
Pour obtenir des exemples plus détaillés sur la façon d'implémenter les paramètres "top" et "bottom", les barres d'application, consultez la page des barres d'application.
Vous pouvez également transmettre du contenu Scaffold
comme vous le feriez à d'autres conteneurs. Passe
une valeur innerPadding
au lambda content
, que vous pouvez ensuite utiliser dans l'élément enfant
composables.
L'exemple suivant fournit un exemple complet de la façon dont vous pouvez implémenter
Scaffold
Elle contient une barre d'application supérieure, une barre d'application inférieure et une action flottante
bouton qui interagit avec l'état interne de 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(), ) } } }
Cette implémentation est la suivante :
![Implémentation d'un échafaudage qui contient des barres d'application supérieures et inférieures simples, ainsi qu'un bouton d'action flottant qui itère un compteur. Le contenu interne de l'échafaudage est un texte simple qui explique le composant.](https://developer.android.com/static/develop/ui/compose/images/components/scaffold.png?authuser=9&hl=fr)