Fudge
07/27/2020, 7:05 PMBox(backgroundColor = Color.Blue) {
Text("Foo")
}
Without specifying any height or width constraints, the Box
will automatically size to be the size of the Text (picture 1).
Now, consider picture 2.
The text Foo
is not a child of the left box, or the right one. Therefore a possible implementation of that would use a Stack
.
Stack {
Row {
Box(Modifier.weight(1f).fillMaxWidth(), backgroundColor = Color.Blue)
Box(Modifier.weight(1f).fillMaxWidth(), backgroundColor = Color.Red)
}
Text(text = "foo", textAlign = TextAlign.Center, modifier = Modifier.fillMaxWidth())
}
The problem now though, is that Box
has no children, and would have a height of 0.
Here's another attempt using `ConstraintLayout`:
ConstraintLayout {
val (left,right,text) = createRefs()
Box(backgroundColor = Color.Blue, modifier = Modifier.weight(1f).constrainAs(left){
linkTo(start = parent.start, end = right.start)
})
Box(backgroundColor = Color.Red,modifier = Modifier.weight(1f).constrainAs(right){
linkTo(start = left.start, end = parent.end)
})
Text(text = "foo", modifier = Modifier.constrainAs(text){
linkTo(start = left.start, end = right.end, bottom = left.bottom, top = left.top)
})
}
This has the same reult as the Stack
approach, with the boxes not showing at all.
So how do I communicate to compose that the boxes should be at least the size of the text? The aim is to not hardcode constraints such as Modifier.height()
.matvei
07/27/2020, 7:19 PMRow
, you set weight(1f) in both, which will stretch each box horizontally. However , you set no height-enforcing modifier so Boxes have 0 height. you need to replace fillMaxWidth with fillMaxHeight and that should do the trickFudge
07/27/2020, 7:39 PMSean McQuillan [G]
07/27/2020, 7:59 PMIntrinsicSize
based on the examples, though I may be misunderstanding the problem@ExperimentalLayout
@Composable
fun SizedBox() {
Stack(modifier = Modifier.preferredHeight(IntrinsicSize.Min)) {
Box(
backgroundColor = Color.Yellow,
modifier = Modifier
.fillMaxSize()
)
Text("Hello", modifier = Modifier.fillMaxWidth())
}
}
Fudge
07/27/2020, 8:59 PM