CODEWITHSUNDEEP
android-jetpack-composedesktop-application
nevrozq
nevrozq

Reputation: 41

Smooth scrolling of LazyColumn in desktop compose

I made LazyColumn with vertical scroll bar and it's work good, but when i scroll mouse, column just jumping(not smooth), but when I scroll vert. bar, it's smooth

@ExperimentalFoundationApi
@OptIn(ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class)
@Composable
fun App() {
        Box(modifier = Modifier.fillMaxSize().padding(10.dp)
        ) {
            val animatedpr = remember { androidx.compose.animation.core.Animatable(initialValue = 0.8f) }
            val stateVertical = rememberLazyListState(0)
            LaunchedEffect(Unit){animatedpr.animateTo(targetValue = 1f, animationSpec = tween(300, easing = LinearEasing))}
            LazyColumn(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, state = stateVertical) {
                items(1100) {
                    OutlinedCard(modifier = Modifier.size(500.dp, 100.dp).padding(20.dp).animateItemPlacement().graphicsLayer(scaleY = animatedpr.value, scaleX = animatedpr.value)) {

                    }
                }
            }
            VerticalScrollbar(
                modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight(),
                adapter = rememberScrollbarAdapter(
                    scrollState = stateVertical
                )
            )


        }
}

Upvotes: 1

Views: 2137

Answers (3)

nevrozq
nevrozq

Reputation: 41

better sollution

if(it.changes.first().scrollDelta.y == 1.0f){
                    scope.launch { stateVertical.animateScrollBy(200.0f) }
                }
                else{
                    scope.launch {
                        scope.launch { stateVertical.animateScrollBy(-200.0f) }
                    }
                }

Upvotes: 2

nevrozq
nevrozq

Reputation: 41

I fixed it by adding "scrollhandler"(onPointerEvent(PointerEventType.Scroll))

val scope = rememberCoroutineScope() // coroutine for scroling(idk, i know coroutines very bad)
val stateVertical = rememberLazyListState(0)
.....
LazyColumn(modifier = Modifier.fillMaxSize().onPointerEvent(PointerEventType.Scroll){
                var currentItem = stateVertical.layoutInfo.visibleItemsInfo[0].index
                val itemsToScrolling = stateVertical.layoutInfo.visibleItemsInfo.size/2 // how many items we scrolling
                if(it.changes.first().scrollDelta.y == 1.0f){ // scroll down
                    scope.launch { stateVertical.animateScrollToItem(currentItem+itemsToScrolling) }
                }
                else{ // scroll up
                    if(currentItem < itemsToScrolling){currentItem = itemsToScrolling} // because we cannot animate to negative number
                    scope.launch { stateVertical.animateScrollToItem(currentItem-itemsToScrolling) }
                }
            }, state = stateVertical){
                *items*
}

Upvotes: 1

Sebastian Rieger
Sebastian Rieger

Reputation: 705

The problem is that you use a single scroll state for two different scroll views. This is causing the jumping while recomposing.

Upvotes: 0

Related Questions