问题

我正在尝试使用Compose、Coil 2.4和SVG扩展来应用色彩滤镜，但似乎不起作用。

SubcomposeAsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("https://www.svgrepo.com/show/43967/colours-samples.svg")
        .decoderFactory(SvgDecoder.Factory())
        .crossfade(true)
        .build(),
    contentDescription = "",
    colorFilter = ColorFilter.tint(Color.Red)
) {
    when (painter.state) {
        is AsyncImagePainter.State.Error -> ImageErrorContent()
        is AsyncImagePainter.State.Loading -> ImageLoadingContent()
        else -> Image(
            painter = painter,
            contentDescription = contentDescription,
        )
    }
}

SubcomposeAsyncImage来自Coil。

我使用SubcomposeAsyncImage而不是其他解决方案，如coil.compose.AsyncImage或androidx.compose.material.Icon与Coil的图像请求构建器，因为我需要使用不同的Composables覆盖加载和错误状态。

这是我制作的一个示例，用来展示问题。我期望下载的图像（具有黑色轮廓的SVG）应该是红色的。我尝试使用不同的混合模式，但没有成功。

有没有办法在来自URL的SVG上实现所需的着色效果？对于类似的SVG，使用Compose的Icon/Image组合是可以正常工作的。

提前感谢您的回答

SubcomposeAsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("https://www.svgrepo.com/show/43967/colours-samples.svg")
        .decoderFactory(SvgDecoder.Factory())
        .crossfade(true)
        .build(),
    contentDescription = "",
    colorFilter = ColorFilter.tint(Color.Red)
) {
    when (painter.state) {
        is AsyncImagePainter.State.Error -> ImageErrorContent()
        is AsyncImagePainter.State.Loading -> ImageLoadingContent()
        else -> Image(
            painter = painter,
            contentDescription = contentDescription,
        )
    }
}

答案1

得分: 1

自从您正在使用Image()来显示异步图像的最终数据，您需要在Image composable上添加colorFilter，而不是SubcomposeAsyncImage。

带有colorFilter的示例实现：

Image(
    painter = painter,
    contentDescription = contentDescription,
    colorFilter = ColorFilter.tint(Color.Red)
)

带有colorFilter的结果图像：

<details>
<summary>英文:</summary>

Edit:

Since you are using `Image()` for showing the final data from async image,you need to add colorFilter to Image composable instead of SubcomposeAsyncImage 

Sample implementation with colorFilter:

SubcomposeAsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data("https://www.svgrepo.com/show/43967/colours-samples.svg")
.decoderFactory(SvgDecoder.Factory())
.build(),
modifier = Modifier
.padding(horizontal = 16.dp, vertical = 4.dp)
.size(50.dp),
contentDescription = null
){
when(painter.state){
is AsyncImagePainter.State.Error -> {
// Error content
}
is AsyncImagePainter.State.Loading -> CircularProgressIndicator()
else -> Image(
painter = painter,
contentDescription = contentDescription,
colorFilter = ColorFilter.tint(Color.Red)
)
}
}

Result with colorFilter:

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/kaUvA.png

</details>