androidscrollandroid-jetpack-composescaffold

TopAppBarScrollBehavior for scaffold TopAppBar not working when its NOT LazyColumn


I am trying to use TopAppBarScrollBehavior for my TopAppBar inside Scaffold. BUT my content is NOT LazyColumn. It's a regular Column with a scrollstate. Here is my code

Scaffold(
    modifier = Modifier
        .fillMaxSize()
        .background(backgroundColor),
    topBar = {
        TopAppBar(
            title = {
                Text(
                    text = "About",
                    color = colorResource(id = R.color.black)
                )
            },
            colors = TopAppBarDefaults.smallTopAppBarColors(
                containerColor = Color.Red,
                titleContentColor = Color.Black,
            ),
            modifier = Modifier
                .fillMaxWidth(),
            navigationIcon = {
                Button(onClick = { }) {
                    Text(text = "B1")
                }
            }, actions = {
                Button(onClick = {}) {
                    Text(text = "B2")
                }
            },
            scrollBehavior = scrollBehaviour
        )
    },
    content = {
        val scrollState = rememberScrollState()
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(it)
                .verticalScroll(scrollState)
        ) {
            // Header
            Text(
                text = "Header",
                modifier = Modifier
                    .padding(horizontal = 30.dp)
                    .wrapContentWidth()
                    .semantics { heading() },
                fontSize = 26.sp,
                color = colorResource(id = R.color.black)
            )

            //Many other components in between

            Text(
                text = "Some text",
                modifier = Modifier
                    .padding(start = 30.dp, end = 30.dp, top = 38.dp)
                    .wrapContentWidth()
                    .semantics { heading() },
                fontSize = 21.sp,
                color = colorResource(id = R.color.black)
            )
        }
    }
)

the TopAppBar does not collapse or expand according to scrolling. What changes do I need to make to TopAppBar to behave as expected.


Solution

  • As reported in the doc:

    A scroll behavior is designed to work in conjunction with a scrolled content to change the top app bar appearance as the content scrolls.

    Use:

        val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
        Scaffold(
            modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
            topBar = {
                TopAppBar(
                    //....
                    scrollBehavior = scrollBehavior
                )
            },
            content = { innerPadding ->
                Column(
                    modifier = Modifier
                        .padding(innerPadding)
                        .verticalScroll(state = rememberScrollState())
                ) {
                      //column content
                }
            }
        )