在Jetpack Compose中创建背景透明带彩色圆角的Box组件

你不需要通过堆叠两个Box来实现这个效果，直接利用Compose的Modifier就能完成背景透明、带红色圆角边框的Box组件，避免上层透明透出下层颜色的问题。

方法一：使用Modifier.border()（推荐） #

这是最简洁的实现方式，直接给Box添加圆角边框，背景默认就是透明的：

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(
    modifier = Modifier
        .size(200.dp) // 自定义组件尺寸
        .border(
            width = 2.dp, // 边框宽度
            color = Color.Red,
            shape = RoundedCornerShape(16.dp) // 圆角半径
        )
        // 背景默认透明，若需显式声明可添加以下代码（可选）
        // .background(Color.Transparent)
) {
    // 在这里添加Box内部的子组件
}

方法二：使用Modifier.drawBehind()（自定义绘制） #

如果需要更灵活的边框绘制逻辑（比如渐变边框），可以用drawBehind手动绘制圆角边框：

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.CornerRadius
import androidx.compose.ui.graphics.Stroke
import androidx.compose.ui.graphics.drawscope.drawRoundRect
import androidx.compose.ui.unit.dp

Box(
    modifier = Modifier
        .size(200.dp)
        .drawBehind {
            drawRoundRect(
                color = Color.Red,
                style = Stroke(width = 2.dp.toPx()), // 边框宽度转像素
                cornerRadius = CornerRadius(16.dp.toPx()) // 圆角半径转像素
            )
        }
) {
    // 内部子组件
}

为什么之前的堆叠方式不可行？ #

你之前用两个Box堆叠的思路，上层透明后必然会透出下层的绿色背景。而上述两种方法都是在单个Box上直接绘制边框，背景保持透明，完全不会有下层颜色干扰的问题。

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