Composestart

Jetpack Compose i Kotlin är uppdelat i några huvudkategorier beroende på om de används för struktur, innehåll eller design (Material Design). Här är de viktigaste standardkomponenterna du bör känna till:

1. Layout-komponenter (Struktur)

Dessa används för att positionera andra element på skärmen.

• Column: Placerar element vertikalt efter varandra.
• Row: Placerar element horisontellt efter varandra.
• Box: Staplar element på varandra (som en stack).
• Scaffold: En färdig layout-struktur som ger plats för vanliga element som en TopAppBar, BottomBar och FloatingActionButton.

2. Grundläggande innehållskomponenter

Dessa kommer från Foundation-biblioteket och är de mest använda byggstenarna.

• Text: För att visa text på skärmen.
• Image: För att visa bilder eller ikoner.
• Button: En klickbar yta med en etikett.
• TextField: Ett inmatningsfält där användaren kan skriva text.

3. Listor och Grids (Lazy-komponenter)

När du har mycket data som ska scrollas använder man "Lazy"-varianter som bara renderar det som syns på skärmen.

• LazyColumn: En vertikal lista (motsvarigheten till RecyclerView i gamla Android).
• LazyRow: En horisontell lista.
• LazyVerticalGrid: För att visa innehåll i ett rutnät.

4. Material Design 3 komponenter

Detta är färdiga UI-element som följer Googles designriktlinjer:

• Card: En behållare med skugga och rundade hörn för att gruppera info.
• Switch: En on/off-knapp.
• Checkbox: För att välja ett eller flera alternativ.
• Slider: För att välja ett värde längs en skala.
• CircularProgressIndicator: En snurrande laddningsikon.

Exempel på en enkel vy

Här är ett exempel på hur några av dessa används tillsammans:

@Composable
fun SimpleProfile() {
    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = "Användarprofil", style = MaterialTheme.typography.headlineMedium)
        Spacer(modifier = Modifier.height(8.dp))
        Row(verticalAlignment = Alignment.CenterVertically) {
            Image(painter = painterResource(id = R.drawable.avatar), contentDescription = "Profilbild")
            Text(text = "Namn: Johan", modifier = Modifier.padding(start = 8.dp))
        }
        Button(onClick = { /* Gör något */ }) {
            Text("Redigera profil")
        }
    }
}