Jetpack Compose中mutableStateListOf变更无法实时更新UI问题

问题原因 #

1. LazyRow列表项未设置唯一Key：当前使用items(postList.size)的方式渲染列表，且未指定每个列表项的唯一标识。Compose无法精准识别哪个列表项的状态发生了变更，仅能在列表项滑出屏幕触发重组时才会更新UI。
2. likePost方法存在潜在索引查找问题：Post是data class，equals方法会比较所有属性。当调用copy修改isLiked后，新对象与传入的post对象不再相等，后续重复操作可能出现索引查找失败的情况。

解决方案 #

1. 为LazyRow列表项添加唯一Key #

修改Composable中的LazyRow代码，使用带Key的items重载方法，以Post的id作为唯一标识（需保证id全局唯一）：

val postList = viewModel.itemList

LazyRow(content = {
    // 使用item的id作为唯一key，让Compose精准跟踪状态变化
    items(postList, key = { it.id }) { postItem ->
        PostItem(
            name = postItem.name,
            isLiked = postItem.isLiked,
            likePost = { viewModel.likePost(postItem) }
        )
    }
})

添加Key后，Compose能直接定位到状态变更的列表项，触发对应PostItem的重组，实现实时UI更新。

2. 优化ViewModel中的likePost方法 #

通过id而非对象本身查找索引，避免因对象属性变化导致的索引查找失败：

fun likePost(post: Post) {
    // 通过id精准查找索引，不受其他属性变化影响
    val index = _itemList.indexOfFirst { it.id == post.id }
    if (index != -1) {
        _itemList[index] = _itemList[index].copy(isLiked = true)
    }
}

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