Thread
#compose
    coolchandrakumar

    coolchandrakumar

    2 years ago
    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 !?
    Andrey Kulikov

    Andrey Kulikov

    2 years ago
    I remember exactly this was implemented for dev10. what version do you use?
    coolchandrakumar

    coolchandrakumar

    2 years ago
    dev 10 only
    Timo Drick

    Timo Drick

    2 years ago
    For me this is working:
    Modifier.offset(x = xOffset, y = 0.dp)
    Also you should consider using
    Modifier.draggable
    Instead of rawDragGestureFilter
    coolchandrakumar

    coolchandrakumar

    2 years ago
    @Timo Drick tried the same. still button click not working. https://gist.github.com/coolchandrakumar123/1a17f07e70ba9dbbc5d44927830d99db
    Draw the content into a layer
    So I put another layout composable over the Swipe Item now working.
    Andrey Kulikov

    Andrey Kulikov

    2 years ago
    could you please file a bug with the code which works for you and which doesnt? thanks!
    Timo Drick

    Timo Drick

    2 years ago
    Ok interesting. Maybe i did something else. But as you can see here the button click is working:
    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()
                }
            }
        }
    }
    Maybe it is the line with: "Clickable(onClick = {}, enabled = !isSwiped)" as workaround. But i am not sure.