Jetpack Compose中Box组件CircleShape不生效问题咨询

问题原因 #

核心问题在于父Box的高度限制导致子组件被挤压变形：父Box设置了.height(30.dp)，但内层Box通过.size(60.dp)声明了需要60dp的宽高空间。垂直方向上父容器仅提供30dp的高度，内层Box被强制压缩，原本的圆形因此被拉伸为椭圆形。

解决方案 #

提供三种针对性处理方案，可根据实际需求选择：

方案一：调整父容器尺寸以容纳子组件

修改父Box的高度，使其能完全容纳内层Box的60dp尺寸：

@Preview(showBackground = true, backgroundColor = 0xffffff)
@Composable
fun PreviewBox() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(60.dp) // 调整父Box高度至60dp
            .background(color = Color.Red)
    ) {
        Box(modifier = Modifier
            .size(60.dp)
            .background(color = Color.Green, shape = CircleShape))
    }
}

方案二：适配父容器尺寸，保持圆形显示

若需保留父Box的30dp高度，可调整内层Box尺寸适配父容器，并通过clip确保圆形效果：

@Preview(showBackground = true, backgroundColor = 0xffffff)
@Composable
fun PreviewBox() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(30.dp)
            .background(color = Color.Red)
    ) {
        Box(modifier = Modifier
            .size(30.dp) // 适配父Box高度
            .clip(CircleShape)
            .background(color = Color.Green)
            .align(Alignment.Center))
    }
}

方案三：允许子组件超出父容器，保留原尺寸圆形

若需保持内层Box的60dp尺寸且不被压缩，可让其超出父容器显示（Compose默认允许子组件超出父容器边界）：

@Preview(showBackground = true, backgroundColor = 0xffffff)
@Composable
fun PreviewBox() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(30.dp)
            .background(color = Color.Red)
    ) {
        Box(modifier = Modifier
            .size(60.dp)
            .background(color = Color.Green, shape = CircleShape)
            .align(Alignment.Center))
    }
}

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