Search code examples
androidkotlinandroid-jetpack-composeandroid-jetpack-compose-material3

CenterAlignedTopAppBar scrollBehavior: No value passed for parameter 'state'


I saw that a new parameter has recently been added to the Material3 Top App Bar Composables on Jetpack Compose:

fun CenterAlignedTopAppBar(
    ...
    scrollBehavior: TopAppBarScrollBehavior? = null
) {}

What I understood from the documentation is that this should enable us to implement the behaviour that the app bar hides at scrolling the content. However, I did not manage to implement this, as the only example I found on StackOverflow seems to no longer work on the latest version of Jetpack Compose and is giving the error No value passed for parameter 'state'.

Can anybody provide an example?
What I want to achieve is a Scaffold, where as topBar a CenterAlignedTopAppBar is provided, that scrolls out on top of the screen if the scrollable content of the Scaffold is scrolled.

Thanks a lot for your help.


Solution

  • I finally managed to get it to work:

    val topAppBarScrollState: TopAppBarScrollState = rememberTopAppBarScrollState()
    val scrollBehavior = remember { TopAppBarDefaults.enterAlwaysScrollBehavior(topAppBarScrollState) }
    
    CenterAlignedTopAppBar(
            modifier = modifier,
            title = { Text(text = stringResource(id = titleResource)) },
            actions = {
                IconButton(
                    onClick = { }
                ) {
                    Icon(
                        imageVector = Icons.Filled.Settings,
                        contentDescription = null,
                    )
                }
            },
            scrollBehavior = scrollBehavior
        )
    

    This only seems to be necessary since Compose version 1.2.0-rc02 though, as on older versions the solution in the post linked in my answer still works.