Scaffold: lo scheletro della schermata
Configuri gli slot del layout standard dell'app.
Scaffold: lo scheletro della schermata è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Meet Scaffold
Most app screens share the same skeleton: a bar on top, content in the middle, maybe a button floating below. Scaffold gives you all of that in one Composable. 🏗️
Why Not Just a Column?
You could hand-build bars with a Column, but you would re-solve insets, spacing, and overlaps every time. Scaffold wires those standard pieces together for you.
The Slot Idea
Scaffold works with slots: named spots where you drop a Composable. You fill the slots you want and leave the rest empty.
The content Slot
The one slot you almost always use is content. It is the main body of your screen, and Scaffold hands it the right padding to use.
Scaffold { innerPadding ->
Text("Hello", Modifier.padding(innerPadding))
}Honor innerPadding
That innerPadding keeps your content from hiding under bars. Always apply it to your top-level content, or text can slip beneath the app bar.
The topBar Slot
Drop a bar into the topBar slot and Scaffold pins it to the top, then shrinks the content area so nothing overlaps.
Scaffold(
topBar = { TopAppBar(title = { Text("Home") }) }
) { padding -> }More Slots Available
Scaffold also offers bottomBar, floatingActionButton, and snackbarHost slots. You will meet each one in this course.
Leave Slots Empty
Every slot is optional. A Scaffold with only content is perfectly valid, so you add bars only when a screen actually needs them.
One Scaffold Per Screen
The usual rule is one Scaffold per screen. It frames that whole screen, while smaller Composables fill its content slot.
Scaffold Is Material 3
Import Scaffold from androidx.compose.material3 so its colors and spacing match the rest of your Material You theme.
import androidx.compose.material3.ScaffoldcontainerColor
Set containerColor to paint the screen background behind every slot. Skip it and Scaffold uses your theme's surface color by default.
Quick Check
What is the safest thing to do with the value Scaffold passes to its content lambda?
Recap
Scaffold is your screen skeleton: fill named slots like content and topBar, honor innerPadding, and use one per screen. Next you will style the top bar. 👍
Domande Frequenti
La lezione «Scaffold: lo scheletro della schermata» è gratuita?
Sì — il testo completo di «Scaffold: lo scheletro della schermata» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Cosa imparerò in «Scaffold: lo scheletro della schermata»?
Configuri gli slot del layout standard dell'app. Eserciti Jetpack Compose Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Jetpack Compose Academy?
Non è richiesta alcuna esperienza precedente. Jetpack Compose Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Scaffold: lo scheletro della schermata»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Jetpack Compose Academy?
Sì. Ogni lezione Jetpack Compose Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Scaffold: lo scheletro della schermata
- TopAppBar e icone delle azioni
- Barre inferiori e pulsanti Floating Action
- Snackbar e SnackbarHostState