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

Stylianos Gakis

02/19/2023, 12:41 AM
If I do
Copy code
Box(Modifier.height(100.dp)) {
  Box(
    Modifier.fillMaxWidth()
      .layout { measurable: Measurable, constraints ->
        val requiredHeight = 200.dp.roundToPx()
        val placeable = measurable.measure(constraints.copy(minHeight = requiredHeight, maxHeight = requiredHeight))
        layout(placeable.width, placeable.height) {
          placeable.place(0, 0)
        }
      }
      .debugBorder(Color.Blue),
  )
}
I’d expect the inside box to render with its top left corner at (0, 0) in the parent’s size, therefore only overflowing below it. But currently, it overflows equally below and above it, meaning that (0, 0) somehow is outside of the actual parent size. Shouldn’t 0,0 just be at the top left of my parent, even though I am measuring my current placeable after adjusting the constraints which are bigger than the parent?
Is there a way to do what I am going for in a more obvious way? I want the box to be say 100.dp, and the inside content be 200.dp, yet have it be bottom aligned, and overflow only above the outer box, not below at all. Couldn’t get it working
I’ve also tried doing smth like
Copy code
Box(height(100) {
  Box(requiredHeight(200).align(BottomCenter)
}
but alas that did not achieve my goal either. When getting a bigger size than the parent it alwasy seems to center itself out. So I fell like I must be missing smth
I hope this helps
I did this
Copy code
.layout { measurable: Measurable, constraints ->
  val requiredHeight = 200.dp.roundToPx()
  // 0, 0 is a bit above since the layout is centered, so this is how much higher y is.
  val actualZeroYPositionOfParent = (requiredHeight - constraints.maxHeight) / 2
  val placeable = measurable.measure(
    constraints.copy(minHeight = requiredHeight, maxHeight = requiredHeight),
  )
  // How much bigger this composable with the requiredHeight is compared to the parent.
  val overflowingHeight = placeable.height - constraints.maxHeight
  layout(placeable.width, placeable.height) {
    placeable.place(0, actualZeroYPositionOfParent - overflowingHeight)
  }
}
And this works, but I can’t help but think that there should be a more normal way to do this.
m

mgrazianodecastro

02/19/2023, 1:27 AM
I wish I knew how to help
a

Albert Chang

02/19/2023, 1:51 PM
If the layout size is bigger than incoming constraints, it will be centered in the parent. You need to use
Copy code
layout(placeable.width, constraints.maxHeight) {
    placeable.place(0, constraints.maxHeight - placeable.height)
}
Or you can just use
Copy code
Modifier
    .fillMaxWidth()
    .wrapContentHeight(align = Alignment.Bottom, bounded = false)
    .height(200.dp)
s

Stylianos Gakis

02/19/2023, 7:37 PM
Thank you so much, as always you’re super helpful Albert. I now understand why it centers as it does, I was misunderstanding what defines what in the layout modifier. And yes, this wrap solution is exactly what I really wanted, without going all the way to the layout modifier even. I was certain there must be a simple way to get this, but I think I never think of using the
wrapContentX
modifier, kinda tricky to think of that for this situation just by its name, before you know how it works internally with the
bounded = false
parameter.
10 Views