Jetpack Compose加载Shape Drawable崩溃问题解决及Image组件颜色资源加载方法咨询

问题分析 #

先给你解释下为啥之前的代码会崩溃：painterResource确实只支持矢量图（VectorDrawable）和光栅图（PNG、JPG这类），你用的ShapeDrawable属于XML定义的Drawable资源，不在它的支持范围内，所以才抛出了那个异常。

这里有两种常用方案，推荐优先用Compose原生的写法，更贴合它的声明式风格：

方案一：用Compose原生API替代XML Shape（推荐） #

不用依赖XML文件，直接用Modifier.background配合shape参数就能实现相同效果，代码还更简洁：

// 如果只是需要一个带圆角的纯色块，用Box就足够了（比Image更合适）
Box(
    modifier = Modifier
        .padding(32.dp)
        .fillMaxWidth()
        .height(200.dp)
        // 设置背景颜色和圆角形状
        .background(color = Color(0xFFFBCCBD), shape = RoundedCornerShape(8.dp))
        .constrainAs(image) {
            top.linkTo(parent.top)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
)

如果你的场景一定要用Image组件（比如要叠加其他绘制内容），可以用ShapeDrawable配合DrawablePainter：

val shapeDrawable = remember {
    ShapeDrawable().apply {
        // 设置填充颜色
        paint.color = Color(0xFFFBCCBD).toArgb()
        // 设置圆角
        shape = RoundedCornerShape(8.dp.toPx())
    }
}

Image(
    painter = DrawablePainter(shapeDrawable),
    contentDescription = null,
    modifier = Modifier
        .padding(32.dp)
        .fillMaxWidth()
        .height(200.dp)
        .constrainAs(image) {
            top.linkTo(parent.top)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
)

方案二：复用已有的XML Shape资源 #

如果你不想放弃已写好的curved_rect.xml，可以通过Context获取Drawable，再包装成DrawablePainter：

val context = LocalContext.current
// remember避免重组时重复创建Drawable
val shapeDrawable = remember {
    ContextCompat.getDrawable(context, R.drawable.curved_rect) as ShapeDrawable
}

Image(
    painter = DrawablePainter(shapeDrawable),
    contentDescription = null,
    modifier = Modifier
        .padding(32.dp)
        .fillMaxWidth()
        .height(200.dp)
        .constrainAs(image) {
            top.linkTo(parent.top)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
)

其实显示纯色的话，用Box+Modifier.background是最轻量化的选择，但如果你的场景必须用Image组件，有两种方式：

方式一：用ColorPainter直接加载颜色 #

ColorPainter是Compose专门用来绘制纯色的Painter，用法超简单：

Image(
    // 直接传入Color对象，或者用colorResource读取colors.xml里的颜色
    painter = ColorPainter(colorResource(R.color.your_color)),
    contentDescription = null,
    modifier = Modifier
        .padding(32.dp)
        .fillMaxWidth()
        .height(200.dp)
        .constrainAs(image) {
            top.linkTo(parent.top)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
)

方式二：将颜色包装成Drawable再加载 #

和加载ShapeDrawable类似，用ColorDrawable配合DrawablePainter：

val context = LocalContext.current
val colorDrawable = remember {
    ColorDrawable(ContextCompat.getColor(context, R.color.your_color))
}

Image(
    painter = DrawablePainter(colorDrawable),
    contentDescription = null,
    modifier = ... // 你的布局修饰符
)

内容的提问来源于stack exchange，提问作者d-feverx