WearOS中Bitmap绘制的Icon无法显示颜色问题求助

我使用Jetpack Compose布局创建Bitmap/Canvas并绘制两个彩色矩形，但在Wear OS模拟器和真机上显示均为白色。代码如下：

@Composable
fun WearApp() {
    val bitmap = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(bitmap)

    val red = Paint()
    red.color = Color.rgb(255, 0, 0)
    canvas.drawRect(0f, 0f, 40f, 40f, red)

    val blue = Paint()
    blue.color = Color.BLUE
    canvas.drawRect(60f, 60f, 100f, 100f, blue)

    IconReproTheme {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(24.dp),
            verticalArrangement = Arrangement.Center,
        ) {
            Icon(bitmap = bitmap.asImageBitmap(),
                contentDescription = null)
        }
    }
}

实际效果为Wear OS模拟器显示两个白色矩形。

问题出在你混用了Android框架的Paint/Canvas和Jetpack Compose的Color——Android原生Paint需要的是android.graphics.Color，但你代码中导入的是androidx.compose.ui.graphics.Color，两者不兼容，导致颜色解析错误，最终显示白色。

修改方式有两种：

方式1：使用Android原生Color类 #

明确使用Android原生的Paint、Canvas和Color类，确保类型匹配：

@Composable
fun WearApp() {
    val bitmap = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888)
    val canvas = android.graphics.Canvas(bitmap)

    val red = android.graphics.Paint()
    red.color = android.graphics.Color.rgb(255, 0, 0)
    canvas.drawRect(0f, 0f, 40f, 40f, red)

    val blue = android.graphics.Paint()
    blue.color = android.graphics.Color.BLUE
    canvas.drawRect(60f, 60f, 100f, 100f, blue)

    IconReproTheme {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(24.dp),
            verticalArrangement = Arrangement.Center,
        ) {
            Icon(bitmap = bitmap.asImageBitmap(), contentDescription = null)
        }
    }
}

方式2：使用Compose原生Canvas API（更推荐） #

既然是Jetpack Compose项目，直接使用Compose自带的Canvas组件，无需手动创建Bitmap，代码更贴合Compose生态：

@Composable
fun WearApp() {
    IconReproTheme {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(24.dp),
            verticalArrangement = Arrangement.Center,
        ) {
            Canvas(modifier = Modifier.size(100.dp)) {
                drawRect(
                    color = Color.Red,
                    topLeft = Offset(0f, 0f),
                    size = Size(40.dp.toPx(), 40.dp.toPx())
                )
                drawRect(
                    color = Color.Blue,
                    topLeft = Offset(60.dp.toPx(), 60.dp.toPx()),
                    size = Size(40.dp.toPx(), 40.dp.toPx())
                )
            }
        }
    }
}

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