0

I have a problem collapsing material3 LargeTopAppBar when scrolling the list programatically. Have a look at this gif, when scrolling by touch the app bar collapses correctly, when calling lazyListState.animateScrollToItem(45) the top bar wont collapse by itself:

enter image description here

Is there any way to collapse it correctly when scrolling the list programatically?

Here's the code, it's basically google's sample for TopBar:

    setContent {
            Material3PlaygroundTheme {
                val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()

                val lazyListState = rememberLazyListState()
                val coroutineScope = rememberCoroutineScope()

                Scaffold(
                    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
                    topBar = {
                        LargeTopAppBar(
                            title = {
                                Text(
                                    "Large TopAppBar",
                                    maxLines = 1,
                                    overflow = TextOverflow.Ellipsis
                                )
                            },
                            actions = {
                                IconButton(onClick = {
                                    coroutineScope.launch {
                                        lazyListState.animateScrollToItem(45)
                                    }
                                }) {
                                    Icon(
                                        imageVector = Icons.Filled.Favorite,
                                        contentDescription = "Localized description"
                                    )
                                }
                            },
                            scrollBehavior = scrollBehavior
                        )
                    },
                    content = { innerPadding ->
                        LazyColumn(
                            state = lazyListState,
                            contentPadding = innerPadding,
                            verticalArrangement = Arrangement.spacedBy(8.dp)
                        ) {
                            val list = (0..75).map { it.toString() }
                            items(count = list.size) {
                                Text(
                                    text = list[it],
                                    style = MaterialTheme.typography.bodyLarge,
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .padding(horizontal = 16.dp)
                                )
                            }
                        }
                    }
                )
            }
        }
BeginnerSirius
  • 117
  • 1
  • 8

0 Answers0