Thread
#compose
    Yashar

    Yashar

    1 year ago
    Hey all. Can someone chime in for a problem I am having? I wanted to create a slider style button where additional actions are hidden beneath. The current setup is as below. And I can't get the surface below the card to register taps. Does moving the top layer card not expose tap-able surface of the view beneath?
    Box {
            Card(...) {
                Row(...)
                ) {
                    Surface(
                        modifier = Modifier
                            .fillMaxHeight()
                            .fillMaxWidth(0.5f)
                            .clickable(onClick = { ... }),
                        color = Color.Red
                    ) {
                        ...
                    }
                    Surface(modifier = Modifier.fillMaxSize().clickable(onClick = { ... }), color = Color.Blue) {
                        ...
                    }
                }
            }
    
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(boxHeight)
                    .padding(horizontal = 40.dp, vertical = 16.dp)
                    .swipeable(
                        state = swipeableState,
                        anchors = anchors,
                        thresholds = { _, _ -> FractionalThreshold(0.3f) },
                        orientation = Orientation.Horizontal
                    )
                    .offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) }
    
            ) {
                Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.clickable(onClick = { ... })) {
                    ...
                }
            }
    }
    matvei

    matvei

    1 year ago
    you have conflicting gesture detection in the sibling tree nodes (clickable and swipeable both children of the box). Sicne they are not parent-child but siblings, they are not able to collaborate properly together. You can try a few things.1. Make swipeable to be a top-level box modifier. It should work since there will be a parent-child gesture chain (we have the same code in SwipeToDismiss component) 2. Try to swap
    offset
    to be before
    swipeable
    . This way your swipeable area will be a top white one, because swipeable bounds will be calculated after offset is applied 3. Consider using experimental SwipeToDismiss that we have in the public API. It seems like it might solve the case you want.
    Yashar

    Yashar

    1 year ago
    Thanks! Your solutions worked 👍
    matvei

    matvei

    1 year ago
    Just curious which one have you found the best fitting your use case?
    Yashar

    Yashar

    1 year ago
    2 was the solution that required the least amount of refactoring so I went with that 🙂
    Another reminder that ordering is super important in Compose