Scaffold

Dans Material Design, un échafaudage est une structure fondamentale qui fournit une plate-forme standardisée pour les interfaces utilisateur complexes. Il rassemble différentes parties de l'interface utilisateur, telles que les barres d'application et les boutons d'action flottants, ce qui donne aux applications un aspect cohérent.

Exemple

Le composable Scaffold fournit une API simple que vous pouvez utiliser pour assembler rapidement la structure de votre application conformément aux consignes Material Design. Scaffold accepte plusieurs composables comme paramètres. En voici quelques-uns:

  • topBar: barre d'application en haut de l'écran.
  • bottomBar: barre d'application en bas de l'écran.
  • floatingActionButton: bouton qui flotte dans le coin inférieur droit de l'écran et que vous pouvez utiliser pour afficher des actions clés.

Pour obtenir des exemples plus détaillés sur l'implémentation des barres d'application en haut et en bas, consultez la page sur les barres d'application.

Vous pouvez également transmettre du contenu Scaffold comme vous le feriez à d'autres conteneurs. Il transmet une valeur innerPadding au lambda content que vous pouvez ensuite utiliser dans les composables enfants.

L'exemple suivant fournit un exemple complet de mise en œuvre de Scaffold. Il contient une barre d'application supérieure, une barre d'application inférieure et un bouton d'action flottant 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(),
            )
        }
    }
}
Scaffold.kt

Cette implémentation est la suivante :

Implémentation d'un échafaudage contenant 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.
Figure 1. Implémentation de l'échafaudage (scaffold).

Ressources supplémentaires