Android Academy · Lektion

Knapper og klik

Tilføj interaktive knapper.

Lektion 2 af 413 trin

Knapper og klik er en gratis Android Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Android Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Android Academy-kurset indeholder 4 lektioner i alt.

Hvad er en knap?

En Button er en composable, der kan trykkes på. Når brugeren trykker på den, kører appen noget kode.

Knapper skal have en handling i onClick og indhold, der skal vises, som regel en Text-etiket.

Button(onClick = { }) {
    Text("Tap me")
}

Lambdaen onClick

Parameteren onClick tager en lambda, som er kode inden i krøllede parenteser { }. Koden kører, hver gang der trykkes på knappen.

Du kan placere enhver logik der, f.eks. udskrivning eller ændring af data.

Button(onClick = {
    println("Clicked!")
}) {
    Text("Click")
}

Knappens indhold

Indholdet inden i de afsluttende krøllede parenteser er en RowScope. Du kan placere Text, ikoner eller begge dele der.

De fleste knapper indeholder blot en enkelt Text-etiket, der beskriver handlingen.

Button(onClick = { }) {
    Text("Save")
}

Tæl klik med tilstand

For at reagere på tryk skal du gemme en værdi med remember og mutableStateOf. Når værdien ændres, opdateres brugerfladen.

Her lægger hvert tryk én til count.

var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
    Text("Count: $count")
}

Deaktivér en knap

Parameteren enabled styrer, om der kan trykkes på en knap. Sæt den til false for at gøre knappen grå og blokere klik.

Det er nyttigt, mens en formular ikke er udfyldt.

Button(
    onClick = { },
    enabled = false
) {
    Text("Locked")
}

OutlinedButton

OutlinedButton tegner kun en kant uden udfyldning. Den fungerer på samme måde, men ser lettere ud.

Brug den til sekundære handlinger ved siden af en mere fremtrædende primær Button.

OutlinedButton(onClick = { }) {
    Text("Cancel")
}

TextButton

TextButton viser kun en etiket uden kant eller udfyldning. Det er den letteste knapstil.

Den egner sig godt til handlinger med lav vægtning, såsom Skip eller Learn more.

TextButton(onClick = { }) {
    Text("Skip")
}

Knapfarver

Du kan ændre farven på en Button med ButtonDefaults.buttonColors ved at angive containerColor til baggrunden.

Vælg farver, der passer til dit brand og stadig er lette at læse.

Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Green
    )
) {
    Text("Go")
}

IconButton

IconButton er et lille rundt område, der kan trykkes på, og som er beregnet til ét Icon, f.eks. et hjerte eller en menu.

Den har ingen etiket, så den sparer plads i værktøjslinjer.

IconButton(onClick = { }) {
    Icon(Icons.Default.Favorite, contentDescription = "Like")
}

Formgivning af en knap

Parameteren shape ændrer hjørnerne. Brug RoundedCornerShape med en dp-værdi for mere afrundede kanter.

Større tal giver blødere, pilleformede knapper.

Button(
    onClick = { },
    shape = RoundedCornerShape(16.dp)
) {
    Text("Rounded")
}

Navngivning af klikfunktioner

For at holde koden overskuelig skal du give onClick en navngiven funktion i stedet for logik direkte i koden. Det gør brugerfladen lettere at læse.

Overfør funktionsreferencen, eller kald funktionen inde i lambdaen.

fun onSave() { println("Saved") }
Button(onClick = { onSave() }) {
    Text("Save")
}

Hurtigt tjek

Test din forståelse af knapper.

Besvar den i den interaktive lektion

Opsummering

Du har lært, at Button bruger onClick til sin handling og en indholdsblok til sin etiket. Tilstand med remember gør det muligt for klik at ændre brugerfladen.

Du har også set OutlinedButton, TextButton og IconButton samt, hvordan du angiver enabled, farver og form.

Nu skal du styre afstande med padding.

Gratis at komme i gang

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: 36
Lektioner: 152

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Knapper og klik” gratis?

Ja — alle 3 lektioner i læringssporet Android Academy, inklusive “Knapper og klik”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Android Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Knapper og klik”?

Tilføj interaktive knapper. Du øver dig i Android 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å Android Academy?

Der kræves ingen tidligere erfaring. Android 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 “Knapper og klik”?

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 Android Academy-lektion?

Ja. Alle Android 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

← Tilbage til Android Academy