compose-multiplatform
compose-multiplatform copied to clipboard
Desktop: Nested scrolling is not working properly
NestedScrollConnectionSample from compose samples (link) is not working on desktop - toolbar suppose to move away when scrolling. Here in the sample onPreScroll method is never called. The sample works fine when run on Android.
@Composable
fun NestedScrollConnectionSample() {
// here we use LazyColumn that has build-in nested scroll, but we want to act like a
// parent for this LazyColumn and participate in its nested scroll.
// Let's make a collapsing toolbar for LazyColumn
val toolbarHeight = 48.dp
val toolbarHeightPx = with(LocalDensity.current) { toolbarHeight.roundToPx().toFloat() }
// our offset to collapse toolbar
val toolbarOffsetHeightPx = remember { mutableStateOf(0f) }
// now, let's create connection to the nested scroll system and listen to the scroll
// happening inside child LazyColumn
val nestedScrollConnection = remember {
object : NestedScrollConnection {
override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
// try to consume before LazyColumn to collapse toolbar if needed, hence pre-scroll
val delta = available.y
val newOffset = toolbarOffsetHeightPx.value + delta
toolbarOffsetHeightPx.value = newOffset.coerceIn(-toolbarHeightPx, 0f)
// here's the catch: let's pretend we consumed 0 in any case, since we want
// LazyColumn to scroll anyway for good UX
// We're basically watching scroll without taking it
return Offset.Zero
}
}
}
Box(
Modifier
.fillMaxSize()
// attach as a parent to the nested scroll system
.nestedScroll(nestedScrollConnection)
) {
// our list with build in nested scroll support that will notify us about its scroll
LazyColumn(contentPadding = PaddingValues(top = toolbarHeight)) {
items(100) { index ->
Text("I'm item $index", modifier = Modifier.fillMaxWidth().padding(16.dp))
}
}
TopAppBar(
modifier = Modifier
.height(toolbarHeight)
.offset { IntOffset(x = 0, y = toolbarOffsetHeightPx.value.roundToInt()) },
title = { Text("toolbar offset is ${toolbarOffsetHeightPx.value}") }
)
}
}
Library version: 0.4.0-build182 OS: MacOS
Any updates on this issue?
Any updates on this issue?
@akurasov hello any plan for this issue?
There are no specific plans about it yet
Could this please be fixed?
Are there any workarounds for this issue?
Still no movement on this? It's been almost 2 years with no progress. Pull Refresh APIs are being introduced that rely on nested scroll, rendering them unusable on Desktop platforms.
Any update on this? It makes TopAppBarDefaults.exitUntilCollapsedScrollBehavior() unusable in desktops, right?
Does Compose desktop supports Scafford + TopAppBar nested scroll&collapsed effect? I try to make it in compose desktop but the app bar didn’t collapse as Android side when I scrolled the content.
Did you guys found any workaround?
This bug still exists
It was fixed in 1.6.0 branch, but we didn't merge this from upstream yet
It was fixed in
1.6.0branch, but we didn't merge this from upstream yet
Unfortunately, it's still not fixed in version 1.6.0-dev1405 and 1.6.0-beta01.
True, I've already checked this after the merge of Google's fix, but it seems that it requires changes from the multiplatform side too. I'll try to fix it before our 1.6 release, but no promises at the moment
UPD: it does NOT included in 1.6.0