Sfondo, bordo e clip
Aggiunga colori, contorni e forme arrotondate.
Sfondo, bordo e clip è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Decorate with Modifiers
Beyond sizing, modifiers can decorate a Composable. You can paint a background, draw a border, and round its corners. 🎨
Add a Background
background fills a Composable with a solid color. It paints the whole area the element occupies, including its size and fill.
Modifier.background(Color.Blue)Use Theme Colors
Prefer theme colors over raw values. Pulling from MaterialTheme keeps your app consistent in light and dark mode.
Modifier.background(
MaterialTheme.colorScheme.primary
)Draw a Border
Use border to outline a Composable. Give it a thickness in dp and a color, and Compose draws the edge for you.
Modifier.border(2.dp, Color.Gray)Meet Shapes
A Shape describes an outline like rounded or circular. Both background and border accept a shape to change their silhouette.
Rounded Corners
RoundedCornerShape softens corners by a radius in dp. It is the go-to shape for cards, buttons, and chips.
RoundedCornerShape(12.dp)Shaped Background
Pass a shape to background and the color fills only inside that outline, giving you a tidy rounded panel.
Modifier.background(
Color.LightGray,
RoundedCornerShape(12.dp)
)Clip the Content
clip trims anything drawn outside a shape. Use it so images and children respect your rounded corners.
Modifier.clip(RoundedCornerShape(12.dp))Make a Circle
Reach for CircleShape when you want a perfect circle, like a round avatar or a floating button.
Modifier.clip(CircleShape)Clip Before Drawing
Place clip before background so the fill is also rounded. Order in the chain decides what gets clipped.
Modifier
.clip(RoundedCornerShape(12.dp))
.background(Color.Cyan)Combine for a Card
Stack clip, background, and border together to craft a polished card surface in just a few lines.
Modifier
.clip(RoundedCornerShape(16.dp))
.background(Color.White)
.border(1.dp, Color.LightGray)Quick Check
You want a rounded background where the fill itself is also rounded. Which modifier ensures that?
Recap
You can now style any element: background paints it, border outlines it, and clip with a Shape rounds it. 🎉
Domande Frequenti
La lezione «Sfondo, bordo e clip» è gratuita?
Sì — il testo completo di «Sfondo, bordo e clip» è 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 «Sfondo, bordo e clip»?
Aggiunga colori, contorni e forme arrotondate. 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 2 di 4.
Quanto tempo richiede la lezione «Sfondo, bordo e clip»?
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
- Padding, dimensioni e fillMaxWidth
- Sfondo, bordo e clip
- Perché l'ordine dei modifier è importante
- weight e dimensionamento flessibile