clickable på alle Composable-er
Gjør elementer som ikke er knapper, trykkbare.
clickable på alle Composable-er er en gratis leksjon i Jetpack Compose Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Jetpack Compose Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Jetpack Compose Academy inneholder totalt 4 leksjoner.
Alt kan gjøres trykkbart
Noen ganger vil du at et helt kort eller en hel rad skal reagere på trykk, ikke en knapp. Modifikatoren clickable gjør at alle composable-funksjoner kan reagere. 👆
Modifikatoren clickable
Legg til Modifier.clickable på et hvilket som helst element, og send inn en onClick-lambda. Elementet håndterer nå trykk akkurat som en knapp.
Text(
"Open profile",
modifier = Modifier.clickable { open() }
)Klikk får en ringeffekt
Som standard legger clickable til en Material-ringeffekt. Det gir umiddelbar visuell tilbakemelding, slik at brukeren ser at trykket ble registrert.
Box(Modifier.clickable { toggle() }) {
Text("Tap this box")
}Gjør hele kort trykkbare
Mønsteret er spesielt nyttig for listeelementer: legg clickable på radens beholder, slik at et trykk hvor som helst åpner detaljskjermen.
Row(Modifier.clickable { openItem(id) }) {
Text(item.title)
}Legg til en innholdsbeskrivelse
Av hensyn til tilgjengelighet kan du sende inn en onClickLabel som beskriver hva trykket gjør, slik at skjermlesere kan lese opp handlingen tydelig.
Modifier.clickable(
onClickLabel = "Open profile"
) { open() }Rekkefølgen i kjeden betyr noe
Plasser clickable før padding for å gjøre også det polstrede området trykkbart, eller etter den for å begrense trykk til det indre innholdet.
Modifier
.clickable { go() }
.padding(16.dp)Bytt tilstand ved trykk
Kombiner clickable med state for å lage egendefinerte vekslinger, for eksempel et utvidbart kort som vokser når overskriften trykkes på.
Modifier.clickable { expanded = !expanded }Deaktiver clickable
Modifikatoren clickable tar også imot et enabled-flagg. Sett det til false, så slutter elementet å reagere, akkurat som en deaktivert knapp.
Modifier.clickable(enabled = isReady) { next() }combinedClickable for flere handlinger
Trenger du også langt trykk eller dobbelttrykk? Bruk combinedClickable, som tilbyr onLongClick og onDoubleClick i tillegg til onClick.
Modifier.combinedClickable(
onClick = { open() },
onLongClick = { showMenu() }
)Knapper kontra clickable
Bruk en ekte Button for tydelige primærhandlinger. Bruk clickable når en vilkårlig flate, for eksempel et kort, skal være trykkbar.
Hold trykkmålene store nok
Det kan være vanskelig å treffe liten tekst med clickable. Gi den padding, slik at trykkmålet er minst omtrent 48dp høyt.
Rask sjekk
Du vil at et trykk hvor som helst på en listerad skal åpne detaljskjermen.
Oppsummering: Gjør alt trykkbart
Du har lært at modifikatoren clickable gjør enhver composable-funksjon trykkbar, med ringeffekter, etiketter og et enabled-flagg. Kort og rader kan også reagere. 🎉
Lær deg Kotlin med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «clickable på alle Composable-er» gratis?
Ja – hele teksten i «clickable på alle Composable-er» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Jetpack Compose Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Jetpack Compose Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «clickable på alle Composable-er»?
Gjør elementer som ikke er knapper, trykkbare. Du øver på Jetpack Compose Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Jetpack Compose Academy?
Ingen tidligere erfaring er nødvendig. Jetpack Compose Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «clickable på alle Composable-er»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Jetpack Compose Academy-leksjonen?
Ja. Alle Jetpack Compose Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Button og onClick
- Tekst-, omriss- og ikonknapper
- Aktiverte, deaktiverte og lastende tilstander
- clickable på alle Composable-er