为什么在 Jetpack Compose 中屏幕旋转时会显示数据

Question

我遇到了这个问题，我从 API、https://randomuser.me/api/ 中检索的数据最初无法加载。
但每次我旋转屏幕时，数据都会更新。

首次加载

屏幕旋转后

查看

class MainActivity : ComponentActivity() {
    private val userViewModel : UserViewModel by viewModels()
    private var userList: List<UserModel> = listOf()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        userViewModel.userModel.observe(this, Observer {
            userList = it
        })
        userViewModel.onCreate()
        setContent {
            ListUsers(userList = userList)
        }
    }
}

视图模型

class UserViewModel : ViewModel() {
    val userModel = MutableLiveData<List<UserModel>>()
    var getRandomUsersUseCase = RandomUsersUseCase()

    fun onCreate() {
        viewModelScope.launch {
            val result = getRandomUsersUseCase()
            if(!result.isNullOrEmpty()){
                userModel.postValue(result)
            }
        }
    }
}

Answer 1

使用State确保数据更改触发可组合项的重组。

If you use another observable type such as LiveData in Compose, you should convert it to State before reading it in a composable using a composable extension function like LiveData.observeAsState().

对您的代码的更改是，

val userListState by userViewModel.userModel.observeAsState()

setContent {
    ListUsers(userList = userListState)
}

为什么在旋转时显示数据？

旋转屏幕或任何其他配置更改期间，将重新创建 activity。

这里有更多信息 - Docs

在大多数情况下，您不需要在屏幕旋转时更改数据。

如果您想在屏幕旋转后保留数据，请将 UserViewModel 中 onCreate() 内的代码移动到 init 块中，如下所示。

init {
    getData()
}

fun getData() {
    viewModelScope.launch {
        val result = getRandomUsersUseCase()
        if(!result.isNullOrEmpty()){
            userModel.postValue(result)
        }

    }
}

如果您需要在任何其他事件（例如按钮单击、滑动以刷新等）上刷新数据，只需在事件处理程序上再次调用 getData()。

P.S：检查是否根据需要添加了正确的导入。

import androidx.compose.runtime.setValue
import androidx.compose.runtime.getValue

为什么在 Jetpack Compose 中屏幕旋转时会显示数据

Why is data being shown when screen rotates in jetpack compose

kotlin

android-jetpack-compose

为什么在旋转时显示数据？