Box: Lag og overlap
Stabl indhold med kontrol over justeringen.
Box: Lag og overlap er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 3 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.
Stabling oven på hinanden
Når underordnede elementer skal overlappe i stedet for at stå på række, bruger du en Box. Den lagdeler indhold på samme sted. 🗂️
Din første Box
En Box tegner sine underordnede elementer i rækkefølge, ét oven på det forrige. Senere elementer ligger over tidligere, ligesom kort i en bunke.
Box {
Image(painter, null)
Text("Caption")
}Z-rækkefølgen følger kildekodens rækkefølge
Det sidste underordnede element, du skriver, vinder det øverste lag. Hvis du vil placere en etiket over et foto, skal du derfor placere Image først og Text bagefter.
Box tilpasser sig sit største underordnede element
Som standard omslutter en Box sit største underordnet element. De andre underordnede elementer placeres inden for denne størrelse i stedet for at udvide den.
Justering af hele Box
Parameteren contentAlignment angiver en standardplacering for hvert underordnet element. Alignment.Center trækker dem alle ind mod midten af Box.
Box(contentAlignment = Alignment.Center) {
Text("Centered")
}Justering af ét underordnet element
Inde i en Box kan hvert underordnet element bruge modifikatoren align til at tilsidesætte standarden. Sådan fastgør du ét element til et hjørne.
Box {
Text("Top end", Modifier.align(Alignment.TopEnd))
}Et badge i hjørnet
Overlap kombineret med align giver dig et klassisk badge: en avatar udfylder Box, mens en lille prik fastgøres til hjørnet TopEnd.
Box {
Avatar()
Dot(Modifier.align(Alignment.TopEnd))
}Tekst oven på et billede
Et almindeligt mønster er en billedtekst oven på et foto. Placér Image først, og justér derefter Text til BottomStart, så teksten vises oven på billedet.
Box {
Image(painter, null)
Text("Sunset", Modifier.align(Alignment.BottomStart))
}Udfyldning og baggrunde
Få en Box til at udfylde pladsen med fillMaxSize, og tilføj derefter en baggrundsfarve. Så bliver den en praktisk lagdelt beholder til en hel skærm.
Box(Modifier.fillMaxSize().background(Color.Black)) {
Text("Hi")
}De ni justeringspositioner
En Box tilbyder ni justeringspositioner fra TopStart til BottomEnd med Center i midten. De dækker alle de placeringer, du har brug for.
Hvornår skal du vælge Box
Vælg Box, når elementer deler det samme område: overlejringer, badges, billedtekster eller en spinner centreret over indhold. Det er dit værktøj til lagdeling.
Hurtigt tjek
Lad os bekræfte, hvordan en Box lægger sine underordnede elementer i lag.
Opsummering: Box
Du har lært om Box: den stabler underordnede elementer på samme sted i kildekode-rækkefølge, tilpasser størrelsen efter det største element og bruger contentAlignment og align til at placere dem.
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 “Box: Lag og overlap” gratis?
Ja — hele teksten til “Box: Lag og overlap” 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 “Box: Lag og overlap”?
Stabl indhold med kontrol over justeringen. 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 3 af 4.
Hvor lang tid tager lektionen “Box: Lag og overlap”?
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.