Compose+MVI架构下更新StateFlow状态未触发重组问题排查

我正在学习Jetpack Compose结合MVI架构的开发方式，在ViewModel中定义了如下StateFlow：

private val _state = MutableStateFlow(UserManagerState())
val state = _state.asStateFlow()

对应的状态类：

data class UserManagerState(
    val userList: List<UserWithRoleView> = emptyList(),
    val shouldCallUpdate: Boolean = false,
    var successMessage: String? = null
)

当我更新列表中单个UserWithRoleView的newRole属性时，Compose不会触发重组，但更新后的状态数据是正确的。更新逻辑如下：

private fun changeUserRole(user: UserWithRoleView, role: RoleEnum) {
    val s = _state.value.userList.toMutableList()
    s.find { it.id == user.id }?.apply {
        newRole = role
    }

    _state.value =
        _state.value.copy(
            userList = s
        )
}

页面中有LazyColumn和默认隐藏的按钮，当列表内容变化时按钮需要显示：

@Composable
fun UserManagerScreen(
    modifier: Modifier,
    viewModel: UserManagerViewModel = hiltViewModel<UserManagerViewModel>()
) {
    val state by viewModel.state.collectAsState()

    Column(
        modifier = modifier
            .fillMaxSize()
    ) {
        LazyColumn {
            items(state.userList, key = {
                it.id
            }) { user ->
                UserWithRoleItem(userWithRoleView = user) { newRole ->
                    viewModel.updateEvent(UserManagerEvent.OnRoleChanged(user, newRole))
                }
            }
        }
        
        val shouldShowSaveButton = 
            state
            .userList
            .any { userWithRoleView ->  
                userWithRoleView.role.name != userWithRoleView.newRole.name
            }
        
        if(shouldShowSaveButton) {
            Button(onClick = {
                viewModel.updateEvent(UserManagerEvent.UpdateUsers)
            }) {
                Text(text = "Modify")
            }
        }
    }
}

测试发现：将状态设为emptyList()时重组正常；在状态类中添加布尔属性并同步更新时重组正常；单独把列表抽离成StateFlow时更新也正常。怀疑问题出在UserWithRoleView的定义上：

data class UserWithRoleView(
    val id: String,
    val userName: String,
    val email: String,
    val role: RoleEnum,
    var newRole: RoleEnum
) {
    fun mapToUserWithRoleDto() =
        UserWithRoleDto(
            id = id,
            userName = userName,
            email = email,
            role = newRole.name
        )
}

1. StateFlow的更新规则：StateFlow只有当新值与旧值通过equals()判断为不相等时，才会发射新值，Compose的collectAsState只有收到新值才会触发重组。
2. Data Class的equals特性：Kotlin的data class自动生成的equals()方法只会考虑用val修饰的属性，var属性不参与结构相等性判断。你的UserWithRoleView中newRole是var，所以即使修改了newRole的值，新旧UserWithRoleView实例的equals()结果仍然为true；同时你修改列表时只是修改了元素的var属性，没有替换元素本身，导致userList的equals()结果也为true。最终UserManagerState.copy()后的新状态与旧状态相等，StateFlow不会发射新值，Compose也就不会重组。

1. 保证状态类的不可变性 #

首先把UserWithRoleView的newRole改成val，让整个data class完全不可变；同时把UserManagerState中的successMessage也改成val，遵循MVI不可变状态的原则：

// 修改后的UserWithRoleView
data class UserWithRoleView(
    val id: String,
    val userName: String,
    val email: String,
    val role: RoleEnum,
    val newRole: RoleEnum // 改为val
) {
    fun mapToUserWithRoleDto() =
        UserWithRoleDto(
            id = id,
            userName = userName,
            email = email,
            role = newRole.name
        )
}

// 修改后的UserManagerState
data class UserManagerState(
    val userList: List<UserWithRoleView> = emptyList(),
    val shouldCallUpdate: Boolean = false,
    val successMessage: String? = null // 改为val
)

2. 正确更新状态列表 #

更新角色时，创建新的UserWithRoleView实例替换原列表中的元素，而不是直接修改var属性：

private fun changeUserRole(user: UserWithRoleView, role: RoleEnum) {
    val updatedUserList = _state.value.userList.map { currentUser ->
        if (currentUser.id == user.id) {
            // 用copy创建新实例，修改newRole属性
            currentUser.copy(newRole = role)
        } else {
            currentUser
        }
    }

    _state.value = _state.value.copy(userList = updatedUserList)
}

效果说明 #

这样修改后，每次更新角色都会生成新的UserWithRoleView实例，进而生成新的userList，UserManagerState.copy()后的新状态与旧状态结构不相等，StateFlow会发射新值，Compose收到新值后触发重组，LazyColumn的列表项和底部按钮的显示逻辑都会正确响应状态变化。

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