Is there any way to disable scroll and clicks on children in a LazyColumn?

# compose

[Utkarsh Tiwari]

Is there any way to disable scroll and clicks on children in a LazyColumn?

[André Kindwall]

You decide yourself what is clickable with Modifier.clickable(). A LazyColumn item is not clickable by default, so just don't set the clickable modifier on it

[Utkarsh Tiwari]

object MultipleItemCarousel {
    data class Item(
        val thumbnail: @Composable () -> Unit
    )
}



@Composable
fun MultipleItemCarousel(
    enabled: Boolean = true,
    carouselItems: List<MultipleItemCarousel.Item> = emptyList() 
) { 

    LazyRow(
        modifier = Modifier
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.spacedBy(DsSizing.measure4)
    ) {
        items(
            items = carouselItems,
            itemContent = { item ->
                item.thumbnail()
            }
        )
    }

}

Thanks Andre! I didn’t set any clickable on the LazyRow. However, the item that I receive in my parent composable are composables themselves which have click listerners set to them. I want to add a disabled state to the row so that the users can’t interact with any items inside the row regardless of them having their indivisual onClick()s and also disable scroll. Basically, i want to disable any interactions on the whole component.

[Gabriel Melo]

What is your use case? The effect you're looking for reminds me of alert dialogs. The answer would probably be to capture any touch interactions and do nothing with them.

[Utkarsh Tiwari]

I am trying to create an item carousel where in users could pass in a list of thumnail composables which have their own onClick() listeners. I want to be able to disable the whole component so that the user can’t interact with the items inside it. To make it appear disabled visually, I have reduced the alpha.

[Utkarsh Tiwari]

This is what I did to achieve the disabled state:

Box {
    LazyRow()
    
    // Blocks inputs when disabled
    if (enabled.not()) {
        Box(
            modifier = Modifier.fillMaxSize()
                .pointerInput(Unit) {
                    detectTapGestures()
                }
           )
    }
}