Text-, Outlined- og Icon-knapper
Vælg den rigtige knapvariant til opgaven.
Text-, Outlined- og Icon-knapper er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 2 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.
Knapper har forskellige personligheder
Ikke alle handlinger fortjener en markant, udfyldt knap. Compose tilbyder flere knapvarianter, som hver signalerer et forskelligt niveau af fremhævelse. 🎨
Den udfyldte knap
Den almindelige Button er udfyldt og har høj fremhævelse. Den tiltrækker sig opmærksomhed, så gem den til den ene primære handling på hver skærm.
Button(onClick = { pay() }) {
Text("Pay now")
}OutlinedButton til sekundære handlinger
En OutlinedButton har kun en kant og ingen udfyldning. Den fremstår som et tydeligt, men sekundært valg ved siden af en udfyldt knap.
OutlinedButton(onClick = { cancel() }) {
Text("Cancel")
}TextButton til lav fremhævelse
En TextButton viser kun en tekst uden kant eller udfyldning. Den er perfekt til diskrete handlinger som Learn more eller valg i dialoger.
TextButton(onClick = { dismiss() }) {
Text("Not now")
}Fremhævelse er et hierarki
Tænk på det som en rangstige af fremhævelse: udfyldt er mest markant, kantet er mellemstærkt, og tekst er mest diskret. Tilpas varianten til handlingens betydning.
Ikoner i knapper
Alle knapper kan indeholde et Icon samt en tekst i deres indholdsrække. Tilføj en lille afstand, så ikonet og teksten ikke rører hinanden.
Button(onClick = { add() }) {
Icon(Icons.Default.Add, null)
Spacer(Modifier.width(8.dp))
Text("Add")
}IconButton
En IconButton er et kompakt trykområde uden tekst, som kun indeholder ét ikon. Den er ideel til værktøjslinjer og handlinger i appbjælken.
IconButton(onClick = { share() }) {
Icon(Icons.Default.Share, "Share")
}Beskriv altid dit ikon
Giv en knap, der kun indeholder et ikon, en contentDescription, så skærmlæsere kan læse den op. En null-beskrivelse skjuler den for tilgængelighedsfunktioner.
IconButton(onClick = { favorite() }) {
Icon(Icons.Default.Favorite, "Favorite")
}FilledIconButton til fremhævelse
Har du brug for en ikonknap, der skiller sig ud? FilledIconButton tilføjer en ensfarvet baggrund og giver den større fremhævelse end den almindelige variant.
FilledIconButton(onClick = { record() }) {
Icon(Icons.Default.Mic, "Record")
}Vælg den rigtige variant
Det rigtige valg guider brugerne: udfyldt til Confirm, kantet til et alternativ, tekst til afvisning og IconButton på steder med begrænset plads.
Samme onClick, anderledes udseende
Alle varianter bruger den samme onClick-kontrakt. Du ændrer kun den visuelle vægt, aldrig måden du kobler handlingen til på.
Hurtigt tjek
Du vil have en diskret handling med lav fremhævelse, som kun har en tekst og ingen kant eller udfyldning.
Opsummering: Det rigtige værktøj til det rigtige tryk
Du har nu en værktøjskasse: udfyldt Button, OutlinedButton, TextButton og IconButton. Tilpas fremhævelsen til handlingen, og giv dine ikoner beskrivelser. ✨
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 “Text-, Outlined- og Icon-knapper” gratis?
Ja — hele teksten til “Text-, Outlined- og Icon-knapper” 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 “Text-, Outlined- og Icon-knapper”?
Vælg den rigtige knapvariant til opgaven. 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 2 af 4.
Hvor lang tid tager lektionen “Text-, Outlined- og Icon-knapper”?
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
- Button og onClick
- Text-, Outlined- og Icon-knapper
- Aktiverede, deaktiverede og indlæsnings-tilstande
- clickable på enhver Composable