modifiers

En Modifier i Jetpack Compose är ett objekt som används för att ändra hur en komponerbar funktion (Composable) ser ut, beter sig eller placeras.

Man kan se det som en lista med instruktioner som man skickar med till en komponent. Med modifiers kan du göra saker som att:

• Ändra storlek (bredd, höjd).
• Lägga till marginaler (padding).
• Ändra bakgrundsfärg eller form.
• Lägga till interaktioner (klick, scroll, drag).
• Positionera elementet i en layout.

Hur man använder Modifiers

De flesta inbyggda komponenter (som Text, Box, Column) har en parameter som heter modifier. Du kedjar ihop olika funktioner med punkt-notation.

Text(
    text = "Hej världen!",
    modifier = Modifier
        .padding(16.dp)          // Inre marginal
        .background(Color.Blue)  // Bakgrundsfärg
        .fillMaxWidth()          // Ta upp hela bredden
        .clickable { /* Klick! */ } // Gör den klickbar
)

Viktiga egenskaper att känna till

1. Ordningen spelar roll!

Detta är det viktigaste att förstå med Modifiers. De appliceras i den ordning du skriver dem.

• Exempel A: .padding(16.dp).background(Color.Red) -> Bakgrundsfärgen hamnar innanför marginalen.
• Exempel B: .background(Color.Red).padding(16.dp) -> Marginalen hamnar utanför den färgade ytan (ser ut som en yttre marginal).

2. Vanliga typer av Modifiers

Här är de absolut vanligaste som du kommer använda dagligen:

Storlek:

• fillMaxSize(): Fyller hela den tillgängliga skärmytan.
• fillMaxWidth() / fillMaxHeight(): Fyller bredden eller höjden.
• size(width, height): Sätter en specifik storlek (t.ex. size(100.dp)).

Layout:

• padding(all): Lägger till luft runt innehållet.
• offset(x, y): Flyttar elementet ett visst avstånd utan att påverka de andra elementens position.

Utseende:

• background(color, shape): Sätter färg och ev. form (t.ex. RoundedCornerShape).
• border(width, color, shape): Lägger till en ram.
• clip(shape): Klipper innehållet efter en form (t.ex. en cirkel).

Interaktion:

• clickable { }: Gör komponenten klickbar.
• scrollable(...): Gör det möjligt att scrolla.

Exempel: En stylad knappliknande Box

Här kombinerar vi flera modifiers för att skapa ett eget gränssnittselement:

Box(
    modifier = Modifier
        .size(width = 200.dp, height = 60.dp)
        .clip(RoundedCornerShape(12.dp)) // Rundade hörn
        .background(Color.Cyan)
        .clickable { println("Box klickad!") }
        .padding(8.dp), // Innehållet hamnar 8dp in
    contentAlignment = Alignment.Center
) {
    Text("Klicka här")
}

Sammanfattning

• Modifier är "inställningarna" för din komponent.
• Använd kedjning för att lägga till flera egenskaper.
• Tänk på ordningen (Padding före eller efter bakgrund?).
• Nästan alla Composable-funktioner du skapar själv bör ta emot en modifier: Modifier = Modifier som parameter för att vara flexibla.