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.
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
}
}
)