https://kotlinlang.org logo
l

lesincs

11/01/2021, 12:05 PM
Weird bug when `Scaffold`’s
bottomBar
using a
wrapContentHeight
Modifier.
This bug can be easily produced by the following code snippet:
Copy code
Scaffold(modifier = Modifier.fillMaxSize(),
    bottomBar = {
      Column(
        modifier = Modifier
         .height(0.dp)
         .wrapContentHeight(Alignment.Bottom, true)
     ) {
        Spacer(
          modifier = Modifier
           .fillMaxWidth()
           .height(50.dp)
           .background(Color.Green)
       )

        Spacer(
          modifier = Modifier
           .fillMaxWidth()
           .height(50.dp)
           .background(Color.Red)
       )
     }
   }) { paddingValues ->
    Spacer(
      Modifier
       .padding(paddingValues)
       .fillMaxSize()
       .background(Color.Black)
   )
 }
As you can see, the
bottomBar
is just a
Column
, and its height is
0.dp
, but when you use a
wrapContentHeight
modifier, guess what? When you run this code, the
bottomBar
can still be showing in the page, that’s so weird. I suddenly found this because I was trying to do some animation. Just don’t know what happend. The compose version is 1.0.1.
a

Albert Chang

11/01/2021, 12:56 PM
Idk what it looks like but in Compose UI layouts don’t clip children by default so even if the height is 0 children can still be drawn.
l

lesincs

11/01/2021, 3:14 PM
in Compose UI layouts don’t clip children by default.
Yeah, that’s strange. Is there any way I can change this behavior?
a

Albert Chang

11/01/2021, 3:44 PM
Use
Modifier.clipToBounds()
.
l

lesincs

11/01/2021, 4:04 PM
Oh, thanks a lot. I put this
Modifier
to the
Column
, and the
bottomBar
finally disappeared. I think that’s the key point . This is just the opposite of the traditional View system,I remember in the view system you should use
clipChildren = false
if you don’t want the children to be clipped.