Baggrund, kant og clip
Tilføj farve, omrids og afrundede former.
Baggrund, kant og clip er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Jetpack Compose Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Udsmyk med modifikatorer
Ud over at ændre størrelsen kan modifikatorer udsmykke en Composable. Du kan male en baggrund, tegne en kant og afrunde hjørnerne. 🎨
Tilføj en baggrund
background udfylder en Composable med en ensfarvet baggrund. Den maler hele det område, elementet optager, inklusive dets størrelse og udfyldning.
Modifier.background(Color.Blue)Brug temafarver
Foretræk temafarver frem for rå værdier. Når du henter farver fra MaterialTheme, forbliver appen ensartet i både lyst og mørkt tema.
Modifier.background(
MaterialTheme.colorScheme.primary
)Tegn en kant
Brug border til at tegne omridset af en Composable. Angiv en tykkelse i dp og en farve, så tegner Compose kanten for dig.
Modifier.border(2.dp, Color.Gray)Mød Shape
En Shape beskriver et omrids, f.eks. afrundet eller cirkulært. Både background og border accepterer en shape, som ændrer deres silhuet.
Afrundede hjørner
RoundedCornerShape blødgør hjørnerne med en radius i dp. Det er den foretrukne shape til kort, knapper og chips.
RoundedCornerShape(12.dp)Formet baggrund
Send en shape til background, så udfylder farven kun området inden for omridset, hvilket giver dig et pænt afrundet panel.
Modifier.background(
Color.LightGray,
RoundedCornerShape(12.dp)
)Klip indholdet
clip beskærer alt, der tegnes uden for en shape. Brug den, så billeder og underordnede elementer respekterer dine afrundede hjørner.
Modifier.clip(RoundedCornerShape(12.dp))Lav en cirkel
Brug CircleShape, når du vil have en perfekt cirkel, f.eks. til en rund avatar eller en flydende knap.
Modifier.clip(CircleShape)Klip før tegning
Placér clip før background, så udfyldningen også bliver afrundet. Rækkefølgen i kæden afgør, hvad der bliver klippet.
Modifier
.clip(RoundedCornerShape(12.dp))
.background(Color.Cyan)Kombinér til et kort
Stabl clip, background og border sammen for at skabe en gennemarbejdet kortoverflade på blot få linjer.
Modifier
.clip(RoundedCornerShape(16.dp))
.background(Color.White)
.border(1.dp, Color.LightGray)Hurtigt tjek
Du vil have en afrundet baggrund, hvor selve udfyldningen også er afrundet. Hvilken modifier sikrer det?
Opsummering
Du kan nu style ethvert element: background maler det, border tegner omridset, og clip med en Shape afrunder det. 🎉
Lær Kotlin med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Baggrund, kant og clip” gratis?
Ja — hele teksten til “Baggrund, kant og clip” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Jetpack Compose Academy-kurset, skal du opgradere til CoddyKit PRO. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Baggrund, kant og clip”?
Tilføj farve, omrids og afrundede former. Du øver dig i Jetpack Compose Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Jetpack Compose Academy?
Der kræves ingen tidligere erfaring. Jetpack Compose Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Baggrund, kant og clip”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Jetpack Compose Academy-lektion?
Ja. Alle Jetpack Compose Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Padding, størrelse og fillMaxWidth
- Baggrund, kant og clip
- Hvorfor rækkefølgen af modifikatorer er vigtig
- weight og fleksibel dimensionering