mutableStateListOf 更改未反映在 UI 中 - Jetpack Compose

Question

in my ViewModel:

private val _itemList = mutableStateListOf<Post>()
val itemList: List<Post> = _itemList

fun likePost(newPost: Post){
        val index = _itemList.indexOf(newPost)
        _itemList[index] = _itemList[index].copy(isLiked = true)
}

Here my Post data class:

data class Post(
    val id: Int,
    val name: String, 
    val isLiked: Boolean = false,
)

And here my Composable:

val postList = viewModel.itemList

LazyRow(content = {

    items(postList.size) { i ->
        val postItem = postList[i]
        PostItem(
            name = postItem.name,
            isLiked = postItem.isLiked,
            likePost = { viewModel.likePost(postItem)}
        )

    }
}) 

The change does not update in the UI instantly, I first have to scroll the updated item out of the screen so it recomposes or switch to another Screen and go back to see the change.

Answer 1

You are returning a List<> effectively and not MutableStateList from your ViewModel.

If you want the list to not be mutable from the view, I happen to use MutableStateFlow<List<>> and return StateFlow<List<>> . You could also just convert it to a list in your composable.

Edit:

//backing cached list, or could be data source like database
private val deviceList = mutableListOf<Device>()

private val _deviceListState = MutableStateFlow<List<Device>>(emptyList())
val deviceListState: StateFlow<List<BluetoothDevice>> = _deviceListState


//manipulate and publish
fun doSomething() {
    _deviceListState.value = deviceList.filter ...
}

In your UI

val deviceListState = viewModel.deviceListState.collectAsState().value

Answer 2

For some reason it doesn't like updating, it will add and delete and update instantly. You have to do it this way when updating for our to update the state.

fun likePost(newPost: Post){
     val index = _itemList.indexOf(newPost)
     _itemList[index] = _itemList[index].copy()
    _itemList[index].isLiked = true

}