英文:
Strange behaviour with a boundless box in Compose
问题
在下面的代码中，当我更改蓝色框的高度值时，红色框的高度会相应改变。然而，对蓝色框的宽度值的更改对红色框的宽度没有影响。为什么会这样呢？
请注意，我已经注释掉了红色框的大小。
@Composable
fun ScreenSize() {
Column(
modifier = Modifier.size(400.dp)
) {
BoxWithConstraints(
modifier = Modifier
//.size(300.dp)
.background(Color.Red),
) {
Text(
text = "mxwidth: $maxWidth, mnwidth: $minWidth," +
" mxheight: $maxHeight, mnheight: $minHeight",
modifier = Modifier.align(Alignment.TopStart)
)
BoxWithConstraints(
modifier = Modifier
.size(width = 200.dp, height = 200.dp)
.background(Color.Blue)
.align(Alignment.CenterStart)
) {
Text(
text = "mxwidth: $maxWidth, mnwidth: $minWidth, mxheight: $maxHeight, mnheight: $minHeight",
modifier = Modifier.align(Alignment.BottomEnd)
)
}
}
}
}
代码的结果：
英文:
In the code below whenever I change the height value of the blue box, the height of the red box changes accordingly. However, changes to the width value of the blue box has no effect on the width of the red box. Why is it so?
Note that I commented out the size of the red box.
@Composable
fun ScreenSize() {
Column(
modifier = Modifier.size(400.dp)
) {
BoxWithConstraints(
modifier = Modifier
//.size(300.dp)
.background(Color.Red),
) {
Text(
text = "mxwidth: $maxWidth, mnwidth: $minWidth," +
" mxheight: $maxHeight, mnheight: $minHeight",
modifier = Modifier.align(Alignment.TopStart)
)
BoxWithConstraints(
modifier = Modifier
.size(width = 200.dp, height = 200.dp)
.background(Color.Blue)
.align(Alignment.CenterStart)
) {
Text(
text = "mxwidth: $maxWidth, mnwidth: $minWidth, mxheight: $maxHeight, mnheight: $minHeight",
modifier = Modifier.align(Alignment.BottomEnd)
)
}
}
}
}
The result of the code:
答案1
得分: 0
由于您在Red BoxWithConstraints内部使用了Blue BoxWithConstraints，它们重叠在一起。由于未定义红色框的宽度，它的宽度由其中的文本来管理。如果您删除/减少文本，红色框的宽度将相应减小。
此外，红色框的宽度也取决于蓝色框，目前它占据了文本或蓝色框的最大宽度。
英文:
As you are using Blue BoxWithConstraints inside Red BoxWithConstraints it's overlapping the red box. And as no width is defined for the red box it's being managed by the width of the text in it. If you'll remove/reduce the text the width of red box will reduce accordingly.
Also the width of red box is dependent on blue box too, currently it's occupying the max width of text or blue box
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论