Jetpack Compose 卡片滑出动画场景下图片异常闪烁问题咨询

问题根因 #

你遇到的闪烁是Compose重组时的节点复用错误导致的，和图片加载框架无关：

• 遍历双卡片时没有给每个Card绑定唯一标识，Compose默认按索引匹配Composable节点
• 顶部卡片滑走、列表移除第一张图片后，重组时原来对应已滑走卡片的索引位置会被分配给新的第二张卡片，你用remember(url)初始化的offsetX会因为url变更重置为0，导致已经滑走的节点突然回到屏幕可视区域，出现闪烁。

解决方案 #

给遍历的每个Card绑定唯一key即可，Compose会按key匹配节点而非索引，已滑走的卡片对应key从列表消失后会直接被卸载，不会被复用。
修改MainScreen中卡片遍历的代码：

@Composable
fun MainScreen(model: MainViewModel) {
    val images: List<String> by model.images.observeAsState(listOf())

    Box(
        modifier = Modifier.fillMaxSize()
    ) {
        images.take(2).reversed().forEach { url ->
            // 增加key绑定，每个url作为唯一标识
            key(url) {
                Card(url = url) {
                    val d = model.images.value?.toMutableList()
                    d?.let {
                        it.removeFirst()
                        model.images.value = it
                    }
                }
            }
        }
    }
}

可选优化：可以等卡片滑出动画完成后再更新列表，避免硬编码延迟时间，修改Card的点击逻辑：

.clickable {
    coroutineScope.launch {
        // 等待动画完成再执行列表更新
        offsetX.animateTo(targetValue = 3000F)
        advance()
    }
}

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