leon
11/06/2023, 6:40 AMModifier.layout()
work to only upper modifier chain, not below chain?
I expect a green box to be drawn at a size of 100.dp
,
and a blue box should be drawn over it.
But the result was not match what I thought.
Can someone explain how layout() modifier works?
I comment out what I thought.
Thanks in advance!
Box(
modifier = Modifier
.size(100.dp) // 1) set size as 100.dp
.background(Color.Green) // 2) set background color as green and a green box would be drawn as 100.dp
.layout { measurable, constraints ->
val m = measurable.measure(constraints)
// 3) change size as (100.dp + 100).
// So next things would be drawn (100.dp + 100) size. -> What I expected
layout(m.width + 100, m.height + 100) {
m.place(50, 50)
}
}
.background(Color.Blue) // 4) based on upper layout() modifier, it would be drawn (100.dp + 100) size. -> What I expected
)
Rebecca Franks
11/06/2023, 8:48 AMBox(modifier = Modifier
.size(100.dp) // 1) set size as 100.dp
.background(Color.Green) // 2) set background color as green and a green box would be drawn as 100.dp
.layout { measurable, constraints ->
val placeable = measurable.measure(constraints.offset(-100, -100))
val width = constraints.constrainWidth(placeable.width + 100)
val height = constraints.constrainHeight(placeable.height + 100)
layout(width, height) {
placeable.place(50, 50)
}
}
.background(Color.Blue) // 4) based on upper layout() modifier, it would be drawn (100.dp + 100) size. -> What I expected
)
leon
11/06/2023, 9:08 AM최상록
11/06/2023, 1:27 PMRebecca Franks
11/06/2023, 2:59 PMleon
11/07/2023, 1:17 PMconstraints
in layout() Modifier
to do the correct calculation.
But I don’t understand why the modifier order doesn’t apply in the order I call it.
First I called the size() Modifier
to 100.dp
and then painted the green background.
Then the green color should be painted at 100.dp
size, right?
Could you explain why the size changed in the layout() Modifier
is applied to the modifier above( .background(Color.Green)
)?
Shouldn’t the layout() Modifier
be reflected in the .background(Color.Blue)
below?Rebecca Franks
11/07/2023, 6:00 PMleon
11/08/2023, 1:02 AMBox(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.border(1.dp, Color.Black),
contentAlignment = Alignment.Center
//contentAlignment = Alignment.CenterStart
) {
Box(
modifier = Modifier
.size(100.dp)
.background(Color.Green)
.layout { measurable, constraints ->
val placeable = measurable.measure(constraints)
layout(placeable.width+ 100, placeable.height) {
placeable.place(0,0)
}
}
.background(Color.Blue.copy(0.5f))
)
Box(
modifier = Modifier
.size(100.dp)
.border(4.dp, Color.Red)
)
}
In my mental model, the Modifier should act in the following order.
1. size(100.dp)
-> I have 100.dp size now.
2. background(Color.Green)
-> I need to paint it green, and I have 100.dp size, so I paint it as big as 100.dp
3. layout { … }
-> I change the size bigger in the layout() Modifier.
4. background(Color.Blue.copy(0.5f))
-> I need to paint it blue, and the size set now is bigger than 100.dp, so I paint it bigger.
But the execution result is that the green is larger than the size 100.dp, and the blue is drawn in the size 100.dp.
It’s not working in the order of my mental model that I wrote above.
Please let me know if there is anything you don’t understand in my writing.
Thank you so much for your help.Rebecca Franks
11/09/2023, 11:00 AMsize
modifier sets min and max constraints to the same values, (of 100.dp), now when you get into the layout modifier, your constraints that you are measuring the placeholder with, are still 100 by 100. so all its doing with placeable.width + 100
, is moving the items around and not changing the size of the item, so you need to call measurable.measure() with constraints that have been updated to include the +100.
@Preview
@Composable
fun Layout2Example() {
Box(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.border(1.dp, Color.Green),
contentAlignment = Alignment.Center
) {
Box(
modifier = Modifier
.size(100.dp)
.background(Color.Green)
.layout { measurable, constraints ->
val placeable = measurable.measure(constraints.offset(100.dp.toPx().toInt()))
val width = constraints.constrainWidth(placeable.width)
val height = constraints.constrainHeight(placeable.height)
layout(width, height) {
placeable.place(0,0)
}
}
.background(Color.Blue.copy(0.5f))
)
Box(
modifier = Modifier
.size(100.dp)
.border(4.dp, Color.Red)
)
}
}
Is this image the result of what you are actually looking for?leon
11/10/2023, 9:17 AMlayout()
modifier is not dealt with properly, it can affect the Outer modifier unintentionally.
Thank you for your explanation!Rebecca Franks
11/10/2023, 9:26 AMleon
11/10/2023, 9:52 AM