Compose for Desktop LazyRow/LazyColumn not scrolling with mouse click

Question

For some reason LazyColumns do not scroll with a mouse click and move gesture. It only works with the mouse wheel so far. For LazyRows it is also not possible to scroll with the mouse wheel. It seems that lazy row is useless for Compose for desktop.

Are there any possiblities to enable a click and move gesture on LazyRow and LazyColum. And if not is it at least possible to enable to scroll through a LazyRow with the mouse wheel?

I used this minimal reproducible example to test the scrolling

@Composable
@Preview
fun App() {
    var text by remember { mutableStateOf("Hello, World!") }

    MaterialTheme {
        LazyRow(modifier = Modifier.fillMaxSize()) {
            repeat(100) {
                item {
                    Text("Test Test Test Test $it    ")
                }
            }
        }
    }
}

fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        App()
    }
}

Icsh

For desktop you might want to consider using scrollbars instead of dragging: github.com/JetBrains/compose-multiplatform/tree/master/… – Maragretmarala

Answer 1

This is the intended behavior.

All scrollable components (including LazyColumn) work (for now) only with mouse wheel scroll events on the desktop.
The scrollable components should not respond to mouse drag/move events.

Here's a basic example of how you can add drag support to your components:

val scrollState = rememberLazyListState()
val coroutineScope = rememberCoroutineScope()
LazyRow(
    state = scrollState,
    modifier = Modifier
        .draggable(
            orientation = Orientation.Horizontal,
            state = rememberDraggableState { delta ->
                coroutineScope.launch {
                    scrollState.scrollBy(-delta)
                }
            },
        )
) {
    items(100) {
        Text("Test Test Test Test $it")
    }
}

Synthetic

so much complexity for this easy behaviour, I hope this will get simplified soon – Tenia

how can I make this work for LazyColumn? When I try, I get this: Unresolved reference. None of the following candidates is applicable because of receiver type mismatch: public fun Modifier.draggable(state: DraggableState, orientation: Orientation, enabled: Boolean = ..., interactionSource: MutableInteractionSource? = ..., startDragImmediately: Boolean = ..., onDragStarted: suspend CoroutineScope.(startedPosition: Offset) → Unit – Faucet

@rosualin there's nothing changed since this answer has being created, make sure you have correct imports - maybe you've imported Orientation from a wrong package? – Synthetic

This exact code works for me, but not for LazyColumn. Weird that LazyRow can find Draggable but not LazyColumn :-? – Faucet

@rosualin if you provide a minimal reproducible example with gist I may be able to help you – Synthetic

Sorry for the late response. this is how I use it: pastebin.com/q3qtSLA5 I included also the imports I use for that (foundation.gestures) I even tried removing the "Tab" and just keeping the row from inside it, then I have no clickable on my "tabs" but still I cannot click and drag with my mouse – Faucet

It was due to the ScrollableTabRow. I ditched that for chromebooks and just use a LazyRow and works – Faucet