https://kotlinlang.org logo
#compose
Title
# compose
d

Daniele B

09/20/2023, 7:25 PM
My app is using
Scaffold
and I upgraded to Material3. In the Scaffold I specify:
topBar
,
content
,
bottomBar
. The
topBar
is a
TopAppBar
. The
content
is a scrolling
LazyColumn
. The top part of the content is now hidden below the topBar, while before it was starting below the topBar. Is there a specific parameter I need to set in order to see the whole content?
c

chr

09/20/2023, 7:31 PM
The
content
lambda actually takes in one argument that the Scaffold will pass in for padding that you would need to respect in order to not be obscured by the `topBar`:
Copy code
Scaffold(
  topBar = { ... },
  content = { contentPadding ->
    LazyColumn(Modifier.padding(contentPadding)) {
      // ...
    }
  },
)
d

Daniele B

09/20/2023, 7:43 PM
The LazyColumn is actually wrapped in other 3 composable. Which means means I have to propagate that contentPadding 3 times. So, is this a design change of Scaffold in Material3? I didn't need to specify any padding before.
m

mkrussel

09/20/2023, 7:48 PM
You can apply the padding to the first composable that in the content, you don't have to apply it to the LazyColumn directly.
☝️ 3
s

Stylianos Gakis

09/20/2023, 7:53 PM
Maybe the problem is that they don’t want to change the padding, but the LazyList’s contentPadding instead, so that the content still draws behind those paddings?
d

dewildte

09/20/2023, 8:06 PM
I thought Material 2 Scaffold also passed in a contentPadding argument. The IDE even gives you a warning if you are not using it.
m

mkrussel

09/20/2023, 8:11 PM
Material 2 did, but I think it only included the bottom bar.
d

Daniele B

09/21/2023, 12:17 AM
Thanks @mkrussel, I solved it by applying the padding to the first composable. Yes, it seems in Material 2, it didn't apply to top bar
z

Zoltan Demant

09/21/2023, 4:22 AM
Isnt this because the TopAppBar can scroll with the content in M3? I dont think that was the case in M2
2 Views