Done the swipe action using the snippet ```val mo...

# compose

[coolchandrakumar]

Done the swipe action using the snippet

val modifier = Modifier.rawDragGestureFilter(dragObserver = object : DragObserver { })

Button( onClick = {
   log()
}) {
Text(text = "Delete")
}

Box( modifier = modifier.drawLayer(
            translationX = itemLeft.value
        )
) {
}

Button click not working !!! translationX not moving the actual UI coordinates !?

swipeAction.mov

[Andrey Kulikov]

I remember exactly this was implemented for dev10. what version do you use?

[coolchandrakumar]

dev 10 only

[Timo Drick]

For me this is working:

Modifier.offset(x = xOffset, y = 0.dp)

Also you should consider using

Modifier.draggable

Instead of rawDragGestureFilter

[coolchandrakumar]

@Timo Drick tried the same. still button click not working. https://gist.github.com/coolchandrakumar123/1a17f07e70ba9dbbc5d44927830d99db

[coolchandrakumar]

Draw the content into a layer

So I put another layout composable over the Swipe Item now working.

[Andrey Kulikov]

could you please file a bug with the code which works for you and which doesnt? thanks!

[Timo Drick]

Ok interesting. Maybe i did something else. But as you can see here the button click is working:

device-2020-05-19-182830.mp4

[Timo Drick]

Here is the full code:

VerticalScroller() {
    Column(Modifier.padding(10.dp)) {
        for (i in 0..50) {
            SwipeArea(onSwiped = { log("Swiped $it") }, background = {
                IconButton(modifier = Modifier.padding(10.dp), onClick = { log("Test") }) {
                    Icon(asset = Icons.Default.Bookmark)
                }
            }) {
                Box(modifier = Modifier.fillMaxWidth().preferredHeight(100.dp), backgroundColor = if (i % 2 == 0) Color.LightGray else Color.Gray) {
                    Text("Test message $i")
                }
            }
        }
    }
}
@Composable
fun SwipeArea(modifier: Modifier = Modifier, onSwiped: (Boolean) -> Unit, background: @Composable() () -> Unit = { Box(
    Modifier.fillMaxWidth()) }, children: @Composable() () -> Unit = emptyContent()
) {
    val position = animatedFloat(0f)
    var flingConfig = AnchorsFlingConfig(listOf(0f, 0f))
    var isSwiped by state { false }
    Stack(modifier = modifier.draggable(
        startDragImmediately = position.isRunning,
        dragDirection = DragDirection.Horizontal,
        onDragStopped = {
            position.fling(flingConfig, it)
        },
        onDragDeltaConsumptionRequested = { delta ->
            position.snapTo(position.value + delta)
            delta
        }
    )) {
        val xOffset = with(DensityAmbient.current) { position.value.toDp() }
        Box(modifier = Modifier.gravity(Alignment.CenterEnd).onChildPositioned {
            val width = it.size.width.value.toFloat()
            flingConfig = AnchorsFlingConfig(anchors = listOf(-width,0f), onAnimationEnd = { _,endValue,_ ->
                log("Fling end $endValue")
                isSwiped = endValue != 0f
                onSwiped(isSwiped)
            })
            position.setBounds(-width, 0f)
        }) {
            background()
        }
        Clickable(onClick = {}, enabled = !isSwiped) {
            Box(
                Modifier.offset(x = xOffset, y = 0.dp).zIndex(1f)
            ) {
                children()
            }
        }
    }
}

[Timo Drick]

Maybe it is the line with: "Clickable(onClick = {}, enabled = !isSwiped)" as workaround. But i am not sure.