使用Color Resource为图片加渐变时遇colorResource报错求助

报错原因 #

colorResource() 是Composable函数，仅能在被@Composable注解标记的代码块（Composable上下文）中调用。而drawWithCache的lambda属于绘图逻辑块，不属于Composable作用域，直接在此调用colorResource()会触发编译错误。

解决方案 #

在Composable作用域内提前获取颜色资源，再将变量传入drawWithCache的绘图逻辑中：

修改后的完整代码 #

LazyColumn(
    modifier = Modifier.padding(it)
) {
    item {
        Box(
            modifier = Modifier.height(200.dp).fillMaxWidth()
        ) {
            val coverPicture = detailList.firstOrNull()?.coverPicture ?: ""
            // 在Composable作用域内提前获取自定义颜色资源
            val gradientEndColor = colorResource(R.color.gradient1)

            Image(
                painter = rememberImagePainter(coverPicture),
                contentDescription = null,
                modifier = Modifier
                    .fillMaxSize()
                    .drawWithCache {
                        val gradient = Brush.verticalGradient(
                            colors = listOf(Color.Transparent, gradientEndColor),
                            startY = size.height / 3,
                            endY = size.height
                        )

                        onDrawWithContent {
                            drawContent()
                            drawRect(gradient, blendMode = BlendMode.Multiply)
                        }
                    },
                contentScale = ContentScale.FillBounds
            )
        }
    }

    items(detailList) { item ->
        // 列表项内容
    }
}

扩展说明 #

如果渐变需要多个自定义颜色资源，同样在Composable作用域内提前获取即可：

// 提前获取多色渐变所需的资源
val gradientStartColor = colorResource(R.color.gradient_start)
val gradientMidColor = colorResource(R.color.gradient_mid)
val gradientEndColor = colorResource(R.color.gradient_end)

// 在渐变配置中使用
val gradient = Brush.verticalGradient(
    colors = listOf(gradientStartColor, gradientMidColor, gradientEndColor),
    startY = 0f,
    endY = size.height
)

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