https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
c

coolchandrakumar

05/18/2020, 1:44 PM
Done the swipe action using the snippet
Copy code
val modifier = Modifier.rawDragGestureFilter(dragObserver = object : DragObserver { })
Copy code
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
a

Andrey Kulikov

05/18/2020, 2:54 PM
I remember exactly this was implemented for dev10. what version do you use?
c

coolchandrakumar

05/18/2020, 3:01 PM
dev 10 only
t

Timo Drick

05/18/2020, 8:05 PM
For me this is working:
Copy code
Modifier.offset(x = xOffset, y = 0.dp)
Also you should consider using
Copy code
Modifier.draggable
Instead of rawDragGestureFilter
c

coolchandrakumar

05/19/2020, 5:13 AM
@Timo Drick tried the same. still button click not working. https://gist.github.com/coolchandrakumar123/1a17f07e70ba9dbbc5d44927830d99db
Copy code
Draw the content into a layer
So I put another layout composable over the Swipe Item now working.
a

Andrey Kulikov

05/19/2020, 10:44 AM
could you please file a bug with the code which works for you and which doesnt? thanks!
t

Timo Drick

05/19/2020, 4:30 PM
Ok interesting. Maybe i did something else. But as you can see here the button click is working:
device-2020-05-19-182830.mp4
Here is the full code:
Copy 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.
4 Views
Powered by