如何让Jetpack Compose正确渲染自定义Shape？

可能的原因与修复方案 #

1. 替换border修饰符为手动绘制边框 #

这个内部Bitmap生成异常大概率是Compose Desktop版本中border修饰符处理自定义Shape时的bug。改用drawBehind手动绘制Shape边框，绕过内部Bitmap生成逻辑：

@Composable
fun TextWithIcon(text: String, icon: Shape) {
    Box(
        modifier = Modifier
            .size(48.dp)
            .border(1.dp, MaterialTheme.colors.secondaryVariant)
            .background(MaterialTheme.colors.background)
            .padding(4.dp)
            .drawBehind {
                val strokeWidth = 2.dp.toPx()
                // 基于当前组件尺寸创建Shape轮廓
                val outline = icon.createOutline(size, layoutDirection, this)
                drawOutline(
                    outline = outline,
                    color = MaterialTheme.colors.secondaryVariant,
                    strokeWidth = strokeWidth
                )
            }
            .padding(4.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(text, color = MaterialTheme.colors.onBackground)
    }
}

2. 避免使用空Shape #

空的GenericShape { _, _ -> }会生成无路径的轮廓，可能触发内部渲染错误。如果需要空Shape，至少定义一个有效边界：

val emptyShape = GenericShape { size, _ ->
    addRect(Rect(0f, 0f, size.width, size.height))
}

3. 升级Compose版本 #

检查当前使用的Compose Desktop版本，升级到最新稳定版，很多内部渲染bug会在新版本中修复。比如在build.gradle.kts中确保依赖使用最新的compose-desktop版本：

implementation(compose.desktop.currentOs)

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