Hintergrund, Rahmen und Clip
Fügen Sie Farben, Umrandungen und abgerundete Formen hinzu.
Hintergrund, Rahmen und Clip ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
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. 🎉
Häufig gestellte Fragen
Ist die Lektion „Hintergrund, Rahmen und Clip“ kostenlos?
Ja — der vollständige Text von „Hintergrund, Rahmen und Clip“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Hintergrund, Rahmen und Clip“?
Fügen Sie Farben, Umrandungen und abgerundete Formen hinzu. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?
Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Hintergrund, Rahmen und Clip“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?
Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Padding, Größe und fillMaxWidth
- Hintergrund, Rahmen und Clip
- Warum die Reihenfolge von Modifikatoren wichtig ist
- weight und flexible Größen