Scaffold in Jetpack Compose — cos'è, proprietà e come funziona

Cos'è Scaffold in Jetpack Compose

Scaffold è una funzione composable che implementa la struttura schermo secondo la specifica Material Design. Scaffold non è un contenitore nel senso tradizionale — è un gestore di layout che coordina il posizionamento di diversi componenti standard di Material sullo schermo.

Scaffold gestisce i margini per TopAppBar, BottomBar e FloatingActionButton, oltre agli elementi di sistema — barra di stato e barra di navigazione. Ciò garantisce che il contenuto non si sovrapponga agli elementi di sistema e sia conforme alle linee guida Material Design.

Secondo Material Design Guidelines, 2025, Scaffold dovrebbe essere l'elemento radice di ogni schermo dell'applicazione. Sostituisce il deprecato CoordinatorLayout del sistema View e fornisce un'API più semplice e dichiarativa per costruire layout dello schermo.

Firma di base di Scaffold

Scaffold accetta i parametri modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost e content. Il parametro content riceve PaddingValues — i margini che il contenuto principale deve considerare.

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

Slot di Scaffold: topBar, bottomBar e floatingActionButton

topBar è lo slot per posizionare la barra superiore dell'app, solitamente TopAppBar o LargeTopAppBar. Scaffold aggiunge automaticamente margini a innerPadding per il contenuto in modo che non si sovrapponga a topBar. TopAppBar può contenere un titolo, un'icona di navigazione e azioni.

bottomBar è lo slot per la barra di navigazione inferiore. Supporta BottomNavigation, BottomAppBar o NavigationBar. Scaffold tiene conto dell'altezza di bottomBar nel calcolare innerPadding per il contenuto. Secondo Material Design Guidelines, 2025, bottomBar dovrebbe essere utilizzato su schermi con 3–5 punti di navigazione.

floatingActionButton è lo slot per il pulsante di azione fluttuante. Scaffold posiziona automaticamente il FAB secondo la specifica Material Design — nell'angolo inferiore destro con margine corretto. floatingActionButtonPosition consente di spostare il FAB al centro del bordo inferiore dello schermo.

Esempio con tutti gli slot

In questo esempio, Scaffold utilizza tutti gli slot principali: TopAppBar con un titolo, BottomBar con tre elementi di navigazione e FloatingActionButton per l'azione 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, "Home") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Cerca") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Contenuto schermo")
        }
    }
}

ScaffoldState: gestione di Drawer e Snackbar

ScaffoldState è l'oggetto di stato di Scaffold che combina DrawerState e SnackbarHostState. DrawerState gestisce l'apertura e la chiusura del menu laterale, mentre SnackbarHostState gestisce la visualizzazione e l'occultamento di Snackbar. Lo stato viene creato tramite rememberScaffoldState() e passato al parametro scaffoldState.

DrawerState fornisce metodi open e close per il controllo programmatico del Drawer. Lo stato del Drawer può essere aperto, chiuso o parzialmente aperto. drawerGesturesEnabled consente di disabilitare il gesto di scorrimento per aprire il Drawer, lasciando solo l'apertura programmatica tramite un pulsante.

SnackbarHostState gestisce lo Snackbar — notifiche temporanee nella parte inferiore dello schermo. Il metodo showSnackbar mostra uno Snackbar con un messaggio e un'azione opzionale. Secondo Material Design Guidelines, 2025, Snackbar dovrebbe essere utilizzato per messaggi brevi senza informazioni criticamente importanti.

@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("Elemento 1")
                Text("Elemento 2")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Contenuto")
        }
    }
}

Esempio di costruzione schermo con Scaffold

Un esempio completo di schermo con Scaffold include TopAppBar, BottomNavigation, FloatingActionButton e Snackbar per visualizzare notifiche quando si preme il FAB. ScaffoldState viene passato a tutti i componenti per il coordinamento dello stato.

@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, "Home") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Impostazioni") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Fatto")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Benvenuto")
        }
    }
}

InnerPadding e layout adattivo con Scaffold

innerPadding sono i PaddingValues che Scaffold passa al blocco content. Contengono i margini necessari per evitare che il contenuto si sovrapponga a statusBar, navigationBar, topBar e bottomBar. L'uso di innerPadding è obbligatorio per una visualizzazione corretta su diversi dispositivi.

Scaffold calcola automaticamente innerPadding in base ai margini di sistema e all'altezza degli slot installati. Su dispositivi con fotocamera a isola o ritaglio dello schermo, Scaffold regola i margini per la barra di stato. Su dispositivi più vecchi con pulsanti fisici, il margine inferiore potrebbe essere assente.

Secondo Android Developers, 2024, innerPadding dovrebbe essere applicato al contenitore radice del contenuto tramite Modifier.padding(innerPadding). Se il contenuto utilizza un contenitore scorrevole, innerPadding viene applicato tramite Modifier.consumeWindowInsets per il corretto funzionamento della tastiera e dei gesti di sistema.

• Applicare innerPadding al contenitore radice del contenuto tramite Modifier.padding(innerPadding)
• Per contenitori scorrevoli utilizzare Modifier.consumeWindowInsets(innerPadding)
• Non aggiungere margini extra per la barra di stato — Scaffold lo fa automaticamente
• Se topBar o bottomBar sono assenti, i margini corrispondenti in innerPadding saranno zero