Scaffold dans Jetpack Compose — ce que c'est, propriétés et fonctionnement

Qu'est-ce que Scaffold dans Jetpack Compose

Scaffold est une fonction composable qui implémente la structure d'écran selon la spécification Material Design. Scaffold n'est pas un conteneur au sens traditionnel — c'est un gestionnaire de mise en page qui coordonne le placement de plusieurs composants Material standard sur l'écran.

Scaffold gère les marges pour TopAppBar, BottomBar et FloatingActionButton, ainsi que les éléments système — la barre d'état et la barre de navigation. Cela garantit que le contenu ne chevauche pas les éléments système et respecte les directives Material Design.

Selon Material Design Guidelines, 2025, Scaffold doit être l'élément racine de chaque écran d'application. Il remplace le CoordinatorLayout obsolète du système View et fournit une API plus simple et déclarative pour construire des mises en page d'écran.

Signature de base de Scaffold

Scaffold accepte les paramètres modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost et content. Le paramètre content reçoit PaddingValues — les marges que le contenu principal doit prendre en compte.

@Composable
fun BasicScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Accueil") }
            )
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            Text("Contenu principal")
        }
    }
}

Emplacements Scaffold : topBar, bottomBar et floatingActionButton

topBar est l'emplacement pour placer la barre supérieure de l'application, généralement TopAppBar ou LargeTopAppBar. Scaffold ajoute automatiquement des marges à innerPadding pour que le contenu ne chevauche pas topBar. TopAppBar peut contenir un titre, une icône de navigation et des actions.

bottomBar est l'emplacement pour la barre de navigation inférieure. Il prend en charge BottomNavigation, BottomAppBar ou NavigationBar. Scaffold tient compte de la hauteur de bottomBar lors du calcul d'innerPadding pour le contenu. Selon Material Design Guidelines, 2025, bottomBar doit être utilisé sur les écrans avec 3 à 5 points de navigation.

floatingActionButton est l'emplacement pour le bouton d'action flottante. Scaffold positionne automatiquement le FAB selon la spécification Material Design — dans le coin inférieur droit avec une marge correcte. floatingActionButtonPosition permet de déplacer le FAB au centre du bord inférieur de l'écran.

Exemple avec tous les emplacements

Dans cet exemple, Scaffold utilise tous les emplacements principaux : TopAppBar avec un titre, BottomBar avec trois éléments de navigation et FloatingActionButton pour l'action principale.

@Composable
fun FullScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("App") },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Home, "Accueil") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Rechercher") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Contenu de l'écran")
        }
    }
}

ScaffoldState : gestion de Drawer et Snackbar

ScaffoldState est l'objet d'état de Scaffold qui combine DrawerState et SnackbarHostState. DrawerState gère l'ouverture et la fermeture du menu latéral, tandis que SnackbarHostState gère l'affichage et le masquage du Snackbar. L'état est créé via rememberScaffoldState() et passé au paramètre scaffoldState.

DrawerState fournit des méthodes open et close pour le contrôle programmatique du Drawer. L'état du Drawer peut être ouvert, fermé ou partiellement ouvert. drawerGesturesEnabled permet de désactiver le geste de balayage pour ouvrir le Drawer, ne laissant que l'ouverture programmatique via un bouton.

SnackbarHostState gère le Snackbar — des notifications temporaires en bas de l'écran. La méthode showSnackbar affiche un Snackbar avec un message et une action facultative. Selon Material Design Guidelines, 2025, Snackbar doit être utilisé pour des messages brefs sans informations critiques.

@Composable
fun ScaffoldWithDrawer() {
    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = { Text("Menu") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }
                    }) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        drawerContent = {
            Column(modifier = Modifier.padding(16.dp)) {
                Text("Élément 1")
                Text("Élément 2")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Contenu")
        }
    }
}

Exemple de construction d'écran avec Scaffold

Un exemple complet d'écran avec Scaffold inclut TopAppBar, BottomNavigation, FloatingActionButton et Snackbar pour afficher des notifications lors de l'appui sur le FAB. ScaffoldState est passé à tous les composants pour la coordination de l'état.

@Composable
fun MainScreen() {
    val state = rememberScaffoldState()
    val scope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = state,
        topBar = {
            TopAppBar(
                title = { Text("IT Sectr") },
                actions = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Notifications, "Notifications")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(icon = { Icon(Icons.Default.Home, "Accueil") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Paramètres") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Terminé")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Bienvenue")
        }
    }
}

InnerPadding et mise en page adaptative avec Scaffold

innerPadding sont les PaddingValues que Scaffold passe au bloc content. Ils contiennent les marges nécessaires pour éviter que le contenu ne chevauche statusBar, navigationBar, topBar et bottomBar. L'utilisation d'innerPadding est obligatoire pour un affichage correct sur différents appareils.

Scaffold calcule automatiquement innerPadding en fonction des marges système et de la hauteur des emplacements installés. Sur les appareils avec îlot caméra ou découpe d'écran, Scaffold ajuste les marges pour la barre d'état. Sur les anciens appareils avec boutons physiques, la marge inférieure peut être absente.

Selon Android Developers, 2024, innerPadding doit être appliqué au conteneur racine du contenu via Modifier.padding(innerPadding). Si le contenu utilise un conteneur défilable, innerPadding est appliqué via Modifier.consumeWindowInsets pour le bon fonctionnement du clavier et des gestes système.

• Appliquez innerPadding au conteneur racine du contenu via Modifier.padding(innerPadding)
• Pour les conteneurs défilables, utilisez Modifier.consumeWindowInsets(innerPadding)
• N'ajoutez pas de marges supplémentaires pour la barre d'état — Scaffold le fait automatiquement
• Si topBar ou bottomBar est absent, les marges correspondantes dans innerPadding seront nulles