Swipe right to left and AFTER left to right - Jetpack Compose

438 Views Asked by At

My problem is pretty straight forward however I don't seem to get a working solution. I'm perfectly capable of swiping left to right (0 -> maxWidth), but not right to left (maxWidth -> 0). What am I missing? My code:

val swipeableState = rememberSwipeableState(initialValue = 0)

...

LaunchedEffect(key1 = swipeableState.currentValue) {
    if (swipeableState.currentValue == 1 && !engaged) {
        onSwipeHigh()
        setEngaged(true)
        setFractionalThreshold(0.1f)
    } else if(swipeableState.currentValue == 0 && engaged) {
        onSwipeLow()
        setEngaged(false)
        setFractionalThreshold(0.9f)
    }
}

...

Box(
            modifier = Modifier
                .onGloballyPositioned {
                    iconSize = it.size
                }
                .swipeable(
                    state = swipeableState,
                    anchors = mapOf(
                        0f to 0,
                        maxWidth to 1
                    ),
                    thresholds = { _, _ -> FractionalThreshold(fractionalThreshold) },
                    orientation = Orientation.Horizontal,
                )
                .offset {
                    IntOffset(swipeableState.offset.value.roundToInt(), 0)
                }

initial state high state

1

There are 1 best solutions below

0
anand yadav On

set swipeable reverseDirection true and Box offset's x value negative

    val boxSize = 90.dp
    val swipeableState = rememberSwipeableState(initialValue = 0)
    val sizePx = with(LocalDensity.current) { boxSize.toPx() }

    val anchors = mapOf(0f to 0, sizePx to 1) // Maps anchor points (in px) to states


    Box(
        modifier = Modifier
            .fillMaxWidth()
            .swipeable(
                state = swipeableState,
                anchors = anchors,
                thresholds = { _, _ -> FractionalThreshold(0.3f) },
                orientation = Orientation.Horizontal,
                reverseDirection = true
            )
            .background(Color.Red) //res
    ) {

        Row(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Yellow)
                .padding(horizontal = 16.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.End
        ) {
            Icon(painter = painterResource(id = R.drawable.ic_edit), contentDescription = "")
            Spacer(modifier = Modifier.width(16.dp))
            Icon(painter = painterResource(id = R.drawable.ic_delete), contentDescription = "")
        }


        Box(
            modifier = Modifier
                .offset {
                    IntOffset(swipeableState.offset.value.roundToInt().unaryMinus(), 0)
                }
                .clip(RoundedCornerShape(4.dp))
                .fillMaxWidth()
                .background(color = Color.Transparent)
        ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
                    .padding(horizontal = 16.dp, vertical = 8.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(24.dp)
            ) {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    text = "Text"
                )
            }
        }
    }