Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why Compose Card not clickable?

I am trying to use jetpack compose 1.0.0-beta08. If I add clickable to Text it works but only text field ripples so what is the problem on Card click ?

@Composable
fun FoodCategoryChip(
    text: String,
    onClick: (String) -> Unit
) {
    Card(
        modifier = Modifier
            .padding(8.dp)
            .clickable(onClick = { onClick(text) }),//this is not working
        elevation = 8.dp,
        shape = MaterialTheme.shapes.medium,
    ) {
        Text(
            text = text,
            modifier = Modifier
                .padding(8.dp)
                .wrapContentHeight(Alignment.CenterVertically),
            color = Color.Black,
        )

    }
}
like image 201
Emre Hamurcu Avatar asked Jun 11 '21 07:06

Emre Hamurcu


People also ask

Is there a clickable component in jetpack compose?

For instance a component like Button in Jetpack Compose which provides an onClick listener is using Clickable under the hood. If you are interested in exploring other components in Jetpack Compose you can check out the series of articles that I have written. How to make a Scrollable list in Jetpack Compose?

What happens when the user clicks on a clickable component?

We can define what happens when the user clicks on a Clickable component in the onClick method. A Clickable component does not provide a touch feedback for that we need to wrap our Clickable inside a Ripple component. If we are doing so then consumeDownOnStart should have a false value otherwise it can be true.

What is a card composable?

The Card composable is a surface that can be used to present content and actions focused on a single topic. If you’re enjoying my posts on Jetpack Compose, check out some details on the book I’m writing on Compose!

What is card in jetpack compose?

A Card is a container that can be used as a parent view for declaring multiple UI elements inside it. It has an elevation property that applies a shadow effect around it. In this article, we will show you how you could implement a simple Card in Android using Jetpack Compose. Follow the below steps once the IDE is ready.


1 Answers

Starting from 1.0.0-beta08 with the Card you have to use the version with the onClick parameter:

BEHAVIOUR-BREAKING: Card now consumes clicks, making clicks added via Card(Modifier.clickable) to be a no-op. Please, use new experimental overload of a Card that accepts onClick.

Card( 
    onClick = { /*...*/ },
    modifier = Modifier
        .padding(8.dp),
    elevation = 8.dp,
    shape = MaterialTheme.shapes.medium,
) {
    //..
}
like image 116
Gabriele Mariotti Avatar answered Oct 23 '22 15:10

Gabriele Mariotti