clickable på enhver Composable
Gør elementer, der ikke er knapper, trykbare.
clickable på enhver Composable er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 4 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.
Alt kan gøres trykbart
Nogle gange vil du have, at et helt kort eller en hel række reagerer på tryk, ikke en knap. Modifikatoren clickable får enhver composable til at reagere. 👆
Modifikatoren clickable
Føj Modifier.clickable til ethvert element, og send en onClick-lambda med. Elementet håndterer nu tryk ligesom en knap.
Text(
"Open profile",
modifier = Modifier.clickable { open() }
)Tryk giver en bølgeeffekt
Som standard tilføjer clickable en Material-bølgeeffekt, der giver øjeblikkelig visuel feedback, så brugeren kan se, at trykket blev registreret.
Box(Modifier.clickable { toggle() }) {
Text("Tap this box")
}Gør hele kort trykbare
Mønstret er især nyttigt for listeelementer: placér clickable på rækkens beholder, så et tryk hvor som helst åbner detaljeskærmen.
Row(Modifier.clickable { openItem(id) }) {
Text(item.title)
}Tilføj en indholdsbeskrivelse
Af hensyn til tilgængeligheden skal du sende et onClickLabel, der beskriver, hvad trykket gør, så skærmlæsere annoncerer handlingen tydeligt.
Modifier.clickable(
onClickLabel = "Open profile"
) { open() }Rækkefølgen i kæden er vigtig
Placér clickable før padding for at gøre området med indvendig afstand trykbart, eller efter den for at begrænse tryk til det indre indhold.
Modifier
.clickable { go() }
.padding(16.dp)Skift tilstand ved tryk
Kombinér clickable med state for at bygge tilpassede skiftefunktioner, f.eks. et kort, der kan foldes ud og vokser, når der trykkes på overskriften.
Modifier.clickable { expanded = !expanded }Deaktivér en clickable
Modifikatoren clickable modtager også et enabled-flag. Sæt det til false, så elementet holder op med at reagere, ligesom en deaktiveret knap.
Modifier.clickable(enabled = isReady) { next() }combinedClickable til mere
Har du også brug for langt tryk eller dobbelttryk? Brug combinedClickable, som udstiller onLongClick og onDoubleClick ud over onClick.
Modifier.combinedClickable(
onClick = { open() },
onLongClick = { showMenu() }
)Knapper kontra clickable
Brug en rigtig Button til tydelige primære handlinger. Brug clickable, når en vilkårlig flade, f.eks. et kort, skal være trykbar.
Gør trykområderne store nok
Lille tekst med clickable kan være svær at ramme. Giv den indvendig afstand, så trykområdet er mindst cirka 48dp højt.
Hurtigt tjek
Du vil have, at et tryk hvor som helst på en listerække åbner detaljeskærmen.
Opsummering: Gør alt trykbart
Du har lært, at modifikatoren clickable gør enhver composable trykbar med bølgeeffekter, etiketter og et enabled-flag. Kort og rækker kan også reagere. 🎉
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 “clickable på enhver Composable” gratis?
Ja — hele teksten til “clickable på enhver Composable” 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 “clickable på enhver Composable”?
Gør elementer, der ikke er knapper, trykbare. 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 4 af 4.
Hvor lang tid tager lektionen “clickable på enhver Composable”?
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