Jetpack Compose 的矢量可绘制显示问题

Question

我有一个项目列表，我想通过点击一次遍历一个项目并以可组合的形式显示其内容：

if (
    gameTopicsItems.value.isNotEmpty()
) {
    GameTopicItem(
        modifier = modifier,
        gameTopic = gameTopicsItems.value[currentIndexState.value],
        showPreviousIcon = currentIndexState.value > 0,
        showNextIcon = currentIndexState.value < gameTopicsItems.value.lastIndex,
        onNextClick = { currentIndexState.value += 1 },
        onPreviousClick = { currentIndexState.value -= 1 },
        showShuffleIcon = gameTopicsItems.value.size > 1,
        onShuffleClick = {
            currentIndexState.value = gameTopicsItems.value.indices.random()
        }
    )
} else {
    EmptyItemsView(modifier = modifier.padding(top = paddingNormal))
}

到目前为止，此逻辑运行良好，但问题在于显示可绘制项目。我在可组合项目中有一个图像，它显示来自可绘制资源的图像，如下所示：

    Image(
    modifier = Modifier
        .constrainAs(gameTopicIcon) {
            start.linkTo(parent.start)
            top.linkTo(parent.top)
        }
        .fillMaxWidth()
        .wrapContentHeight()
        .padding(
            start = paddingXxl1,
            end = paddingXxl1,
            top = paddingXxl2
        ),
    painter = painterResource(
        id = gameTopic.icon
    ),
    contentDescription = gameTopic.title,
    contentScale = ContentScale.FillWidth,
)

我遇到的问题是，在迭代列表几次后，图像（它们是矢量）开始奇怪地显示，如下面的屏幕截图所示。可能是什么问题？

Answer 1

使用带键的图像画家，例如：

Image(
    painter = key(gameTopic.icon) { painterResource(gameTopic.icon) },
    contentDescription = null
)