If I add TopBar to the Scaffold in app top level composable then it looks as needed (shadow/elevation) when card items behind the bar:
Scaffold(
topBar = {
Surface(shadowElevation = 3.dp) {
TopAppBar(title = { Text("Test Title") })
}
}
) { padding ->
// there's also should be NavHost but simplified for a sample code
LazyColumn(
modifier = Modifier
.fillMaxSize()
.padding(padding),
contentPadding = PaddingValues(16.dp),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
items((0..25).toList()) {
Card(modifier = Modifier.fillMaxWidth()) {
Text(
modifier = Modifier.padding(16.dp),
text = "Test card item ${it + 1}"
)
}
}
}
}
But when I don't want to add TopBar to Scaffold and allow each screen of the app to implement it itself then it doesn't look the same when cards behind the bar as it was in the first case, there are less shadows or they can disappear at all if color of topbar and card is the same which won't happen when using slot of Scaffold:
Scaffold { padding ->
// there's also should be NavHost but simplified for a sample code
Column {
Surface(shadowElevation = 3.dp) {
TopAppBar(title = { Text("Test Title") })
}
LazyColumn(
modifier = Modifier
.fillMaxWidth()
.padding(padding),
contentPadding = PaddingValues(16.dp),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
items((0..25).toList()) {
Card(modifier = Modifier.fillMaxWidth()) {
Text(
modifier = Modifier.padding(16.dp),
text = "Test card item ${it + 1}"
)
}
}
}
}
}
How can I get the same effect but without using slot of Scaffold?
It looks the same as the first one only when cards are not behind top bar (no scroll):
