Weird bug when `Scaffold`’s `bottomBar` using a `w...

# compose

[lesincs]

Weird bug when `Scaffold`’s bottomBar using a wrapContentHeight Modifier.

[lesincs]

This bug can be easily produced by the following code snippet:

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.

[Albert Chang]

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.

[lesincs]

in Compose UI layouts don’t clip children by default.

Yeah, that’s strange. Is there any way I can change this behavior?

[Albert Chang]

Use Modifier.clipToBounds().

[lesincs]

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.