Statistikrække og følg-knap
Tilføj interaktive detaljer til kortet.
Statistikrække og følg-knap 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.
Tilføj de interaktive detaljer
Nu hvor headeren er færdig, skal du tilføje den nederste halvdel: en række med statistikker og en følg-knap, der reagerer på tryk. Det er her, kortet kommer til live. ⚡
Én statistikblok
Hver statistik består af to stablede Text-elementer: et stort tal og en lille etiket. En lille Column holder dem samlet i en pæn blok.
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text("128")
Text("Posts")
}Fremhæv tallet
Antallet skal træde frem, mens etiketten skal være diskret. Giv tallet en fed style og etiketten en mindre.
Text("128", style = MaterialTheme.typography.titleMedium)
Text("Posts", style = MaterialTheme.typography.labelSmall)Placér statistikker i en Row
Tre statistikblokke står ved siden af hinanden, så pak dem ind i en Row. Hver blok bliver et underordnet element, der placeres fra venstre mod højre.
Row {
StatBlock("128", "Posts")
StatBlock("4.2k", "Followers")
StatBlock("180", "Following")
}Fordel statistikkerne jævnt
Fordel blokkene over kortet med Arrangement.SpaceEvenly på Row, så mellemrummene bliver ens og afbalancerede.
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) { /* ... */ }Tilføj følg-knappen
Tilføj en Button under statistikkerne. Dens onClick-lambda kører din kode, i det øjeblik brugeren trykker på den.
Button(onClick = { /* follow */ }) {
Text("Follow")
}Gør den fuldbredde
En primær handlingsknap fungerer bedst over hele kortets bredde. Tilføj fillMaxWidth, så den strækker sig fra kant til kant.
Button(
onClick = { /* follow */ },
modifier = Modifier.fillMaxWidth()
) { Text("Follow") }Hold styr på følg-tilstanden
Knappen skal skifte mellem Follow og Following. Gem denne tilstand med remember og mutableStateOf, så brugerfladen reagerer på tryk.
var following by remember { mutableStateOf(false) }Skift tilstand ved tryk
Skift den booleske værdi i onClick. Compose opdager, at tilstanden er ændret, og tegner automatisk knappen igen med den nye tekst.
Button(onClick = { following = !following }) {
Text(if (following) "Following" else "Follow")
}Sæt det ind i kortet
Placér stats-Row og Button under headeren i den ydre Column. Nu læses hele kortet fra top til bund i den rigtige rækkefølge.
Et interaktivt kort
Du har nu statistik, en følg-knap og en tilstand, der opdateres live. Et tryk ændrer faktisk skærmen, hvilket er kernen i en deklarativ Compose-brugerflade. 🎉
Hurtigt tjek
Hvad får knappens tekst til at opdatere, når der trykkes på den?
Opsummering: Statistik og handling
Du byggede en Row med jævnt fordelte statistikblokke og en følg-knap i fuld bredde, som styres af en gemt tilstand. Nu skal du omstrukturere det hele til rene, genanvendelige dele.
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 “Statistikrække og følg-knap” gratis?
Ja — hele teksten til “Statistikrække og følg-knap” 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 “Statistikrække og følg-knap”?
Tilføj interaktive detaljer til kortet. 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 “Statistikrække og følg-knap”?
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
- Skitsér layoutet til profilkortet
- Sektion med avatar, navn og bio
- Statistikrække og følg-knap
- Udtræk genanvendelige Composables