观察 livedata 并在 jetpack compose 中导航

Question

我刚开始学习jetpack compose。 我有一个非常基本的问题。 我的 ViewModel 有一个 SingleLiveEvent，我用它来导航到另一个屏幕。

private val _navigateToDetails: SingleLiveEvent<Movie> = SingleLiveEvent()
val navigateToDetails: MutableLiveData<Movie> = _navigateToDetails

我知道我可以使用 Livedata 作为 state 来发出 UI，但是如何使用它来触发可组合中的某些操作。

以前我使用viewLifecycleOwner来观察 state，因为任何人都会这样做。

viewModel.navigateToDetails.observe(viewLifecycleOwner) {
    // navigate to details
}

我如何在撰写中实现相同的目标。 我不知道这是否可能。 也许我并没有以撰写方式思考这一点。 任何帮助，将不胜感激。

Answer 1

实际上，在 compose 中我们使用mutableStateOf()而不是 LiveData。 在您的视图模型中，您可以将数据持有者的类型从 LiveData 更改为 mutableStateOf(...) 这将允许您直接在 Composables 中使用它，而无需显式调用 observe()

假设您希望在您的视图模型中存储任何类型的 integer 并基于此更新您的 Composable 的 state。

在您的视图模型中，

var mInteger by mutableStateOf (0) //'by' helps treat state as data

fun updateMInteger(newValue: Int){
mInteger = newValue
}

在您的 Composable 中，直接调用viewmodel.mInteger并像这样构建 Compose，自动更新 UI，因为 mInteger 是从 Composable 中读取的

喜欢

Text(viewModel.mInteger)

Answer 2

我会做一些事情来确保我只做一次：

@Composable
fun LoginScreen(viewModel: LoginViewModel) {
    val loginState by viewModel.loginState.observeAsState(null)
    val hasHandledNavigation = remember { mutableStateOf(false)}
    if (loginState != null && !hasHandledNavigation.value ) {
        navigateToWelcomeScreen()
    else {
        // rest of the Compose UI
    }
}