Jetpack Compose中子组件不遵循父约束的问题咨询

核心原因 #

Jetpack Compose的Box组件默认采用堆叠布局，子元素的显示层级完全由代码中的声明顺序决定：后声明的子元素会绘制在前面子元素的上层，和子元素自身的尺寸大小无关。

不管蓝色Box的宽高设为200.dp还是30.dp，它都是在绿色Box之后声明的，所以始终会覆盖在绿色Box上面。父Box设置的60.dp尺寸只是限制自身的布局范围，不会改变子元素的堆叠顺序。

解决方法 #

如果想让绿色Box显示在蓝色Box上层，有两种常用方式：

1. 调整子元素的声明顺序，把绿色Box放在蓝色Box之后：

@Composable
fun MainScreen() {
    Box(
        modifier = Modifier
            .size(60.dp)
            .background(color = Color.Red)
    ) {
        Box(modifier = Modifier
            .size(30.dp)
            .background(Color.Blue)
        )
        Box(
            modifier = Modifier
                .size(30.dp)
                .background(Color.Green)
        )
    }
}

2. 使用Modifier.zIndex()手动指定层级数值，数值越高的子元素显示层级越靠前：

@Composable
fun MainScreen() {
    Box(
        modifier = Modifier
            .size(60.dp)
            .background(color = Color.Red)
    ) {
        Box(
            modifier = Modifier
                .size(30.dp)
                .background(Color.Green)
                .zIndex(1f)
        )
        Box(modifier = Modifier
            .size(30.dp)
            .background(Color.Blue)
        )
    }
}

内容的提问来源于stack exchange，提问作者ntos