https://kotlinlang.org logo
#compose
Title
# compose
n

Naveen Perumal

02/27/2024, 11:40 AM
I want to make a composable scrollable in both directions with behaviour similar to that of spreadsheet. Adding vertical and horizontal scroll to the composable makes it scrollable in both directions. But the composable scrolls completely in either horizontal or vertical direction. If the user initially starts scrolling in horizontal direction and changes the direction to vertical in midway or if the user scrolls in between horizontal and vertical direction, the scroll still happens in either vertical or horizontal direction. I was able to achieve the required behaviour using dragGestures :
Copy code
val verticalScrollState = rememberScrollState()
val horizontalScrollState = rememberScrollState()
val coroutineScope = rememberCoroutineScope()
Box(
    modifier = Modifier
        .fillMaxWidth()
        .fillMaxHeight()
        .horizontalScroll(horizontalScrollState)
        .verticalScroll(verticalScrollState)
        .pointerInput(Unit) {
            detectDragGestures { change, dragAmount ->
                coroutineScope.launch {
                    verticalScrollState.scrollBy(-dragAmount.y)
                    horizontalScrollState.scrollBy(-dragAmount.x)
                }
                change.consume()
            }
        }
    )
But when using dragGestures, fling doesn't work. How to achieve the spreadsheet behaviour in a clean way?
m

MR3Y

02/27/2024, 11:46 AM
You may want to take a look at MinaBox but It uses a
LazyLayout
and I'm not sure If you need that lazy behavior here, looking at how at handles gestures can still be beneficial though for your use-case.
👍 2
f

Filip Wiesner

02/27/2024, 11:47 AM
If you are happy with your current solution and just need the fling, you can use
VelocityTracker
to calculate fling on your own.
n

Naveen Perumal

02/27/2024, 11:50 AM
Even if I can calculate the fling, the animateScrollBy() does not seem to work with my current solution
a

Albert Chang

02/27/2024, 2:32 PM
Here’s another example of 2D fling. Note that you need to call
animateDecay
for the two axes separately.
4 Views