Jetpack Compose中带RoundedCornerShape的Box为何出现4条边角线？

你遇到的是Compose布局中常见的多层背景裁剪精度问题——当外层Box裁剪圆角后设置黑色背景，内层白色Box填充全屏时，由于像素对齐或抗锯齿的原因，内层Box边缘和外层裁剪区域之间会出现1px左右的缝隙，露出外层黑色背景，看起来就像四条边角线。clipToBounds解决的是子布局超出父布局的裁剪问题，对这种缝隙无效。

下面给你几个实用的解决办法：

方法1：给内层Box加极小的内边距 #

让内层Box不要完全贴满外层，留出极小空间避免缝隙，代码修改如下：

Box(modifier = Modifier
    .width(400.dp)
    .aspectRatio(1.0f)
    .clip(RoundedCornerShape(4.dp))
    .background(Color.Black)
) {
    Box(modifier = Modifier
        .background(Color.White)
        .fillMaxSize()
        .padding(0.5.dp)) { // 极小padding避免边缘贴合露出缝隙
    }
}

方法2：用border修饰符替代两层背景 #

如果你的需求是做一个带圆角黑色边框的白色盒子，直接用border更简单，完全不会有缝隙问题：

Box(modifier = Modifier
    .width(400.dp)
    .aspectRatio(1.0f)
    .background(Color.White)
    .border(1.dp, Color.Black, RoundedCornerShape(4.dp))
) {
    // 这里放你的内容
}

方法3：给内层Box也加上相同的圆角裁剪 #

让内层和外层的裁剪区域完全匹配，避免缝隙：

Box(modifier = Modifier
    .width(400.dp)
    .aspectRatio(1.0f)
    .clip(RoundedCornerShape(4.dp))
    .background(Color.Black)
) {
    Box(modifier = Modifier
        .clip(RoundedCornerShape(4.dp)) // 内层也加相同圆角裁剪
        .background(Color.White)
        .fillMaxSize()) {
    }
}

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