clickable på valfri Composable
Gör element som inte är knappar tryckbara.
clickable på valfri Composable är en gratis lektion i Jetpack Compose Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Jetpack Compose Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Jetpack Compose Academy innehåller totalt 4 lektioner.
Allt kan göras tryckbart
Ibland vill Ni att ett helt kort eller en hel rad ska reagera på tryckningar, inte en knapp. Modifieraren clickable gör att alla composables kan reagera. 👆
Modifieraren clickable
Lägg till Modifier.clickable på valfritt element och skicka med en onClick-lambda. Elementet hanterar nu tryckningar precis som en knapp.
Text(
"Open profile",
modifier = Modifier.clickable { open() }
)Tryckningar får en ripple-effekt
Som standard lägger clickable till en Material-ripple, vilket ger omedelbar visuell återkoppling så att användaren ser att tryckningen registrerades.
Box(Modifier.clickable { toggle() }) {
Text("Tap this box")
}Gör hela kort tryckbara
Mönstret passar utmärkt för list items: lägg clickable på radens behållare, så öppnar ett tryck var som helst detaljskärmen.
Row(Modifier.clickable { openItem(id) }) {
Text(item.title)
}Lägg till en innehållsbeskrivning
För tillgänglighet skickar Ni med en onClickLabel som beskriver vad tryckningen gör, så att skärmläsare kan läsa upp åtgärden tydligt.
Modifier.clickable(
onClickLabel = "Open profile"
) { open() }Ordningen i kedjan spelar roll
Placera clickable före padding för att göra det utfyllda området tryckbart, eller efter padding för att begränsa tryckningar till det inre innehållet.
Modifier
.clickable { go() }
.padding(16.dp)Ändra tillstånd vid tryckning
Kombinera clickable med state för att skapa egna växlingskontroller, till exempel ett expanderbart kort som växer när Ni trycker på rubriken.
Modifier.clickable { expanded = !expanded }Inaktivera clickable
Modifieraren clickable tar också emot en flagga för enabled. Sätt den till false, så slutar elementet att reagera, precis som en inaktiverad knapp.
Modifier.clickable(enabled = isReady) { next() }combinedClickable för fler åtgärder
Behöver Ni även långtryck eller dubbeltryck? Använd combinedClickable, som tillhandahåller onLongClick och onDoubleClick tillsammans med onClick.
Modifier.combinedClickable(
onClick = { open() },
onLongClick = { showMenu() }
)Knappar jämfört med clickable
Använd en riktig Button för tydliga primära åtgärder. Använd clickable när en valfri yta, till exempel ett kort, behöver vara tryckbar.
Håll tryckytorna tillräckligt stora
Liten text med clickable kan vara svår att träffa. Lägg till utfyllnad så att touch target är minst ungefär 48 dp hög.
Snabbkontroll
Ni vill att ett tryck var som helst på en rad i en lista ska öppna dess detaljskärm.
Sammanfattning: gör allt tryckbart
Ni har lärt Er att modifieraren clickable gör alla composables tryckbara, med ripple-effekter, etiketter och en enabled-flagga. Även kort och rader kan reagera. 🎉
Lär dig Kotlin med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”clickable på valfri Composable” gratis?
Ja – hela texten till ”clickable på valfri Composable” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Jetpack Compose Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Jetpack Compose Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”clickable på valfri Composable”?
Gör element som inte är knappar tryckbara. Ni övar på Jetpack Compose Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Jetpack Compose Academy?
Du behöver inga förkunskaper. Utbildningen i Jetpack Compose Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”clickable på valfri Composable”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Jetpack Compose Academy-lektionen?
Ja. Varje Jetpack Compose Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Button och onClick
- Text-, Outlined- och Icon-knappar
- Aktiverade, inaktiverade och laddande tillstånd
- clickable på valfri Composable