android-jetpack-compose - 如何在 Compose NavGraph 中的两个或多个 Jetpack 可组合组件之间共享视图模型?
问题描述
考虑这个例子。
对于身份验证,我们将使用 2 个屏幕 - 一个用于输入电话号码,另一个用于输入 OTP。
这两个屏幕都是在 Jetpack Compose 中制作的,对于 NavGraph,我们使用的是 compose 导航。
另外我不得不提一下,DI 是由 Koin 处理的。
val navController = rememberNavController()
NavHost(navController) {
navigation(
startDestination = "phone_number_screen",
route = "auth"
) {
composable(route = "phone_number_screen") {
// Get's a new instance of AuthViewModel
PhoneNumberScreen(viewModel = getViewModel<AuthViewModel>())
}
composable(route = "otp_screen") {
// Get's a new instance of AuthViewModel
OTPScreen(viewModel = getViewModel<AuthViewModel>())
}
}
}
那么我们如何才能在 Jetpack compose NavGraph 中的两个或多个可组合组件之间共享相同的视图模型呢?
解决方案
您可以将您的顶部传递viewModelStoreOwner
到每个目的地
- 直接传递给
.viewModel()
调用,composable("first")
在我的例子中 - 覆盖
LocalViewModelStoreOwner
整个内容,因此在我的示例中,内部的每个可组合CompositionLocalProvider
都可以访问相同的视图模型composable("second")
val viewModelStoreOwner = checkNotNull(LocalViewModelStoreOwner.current) {
"No ViewModelStoreOwner was provided via LocalViewModelStoreOwner"
}
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "first") {
composable("first") {
val model = viewModel<SharedModel>(viewModelStoreOwner = viewModelStoreOwner)
}
composable("second") {
CompositionLocalProvider(
LocalViewModelStoreOwner provides viewModelStoreOwner
) {
SecondScreen()
}
}
}
在第二种情况下,您可以在组合树的任何级别获取模型,该级别位于CompositionLocalProvider
:
@Composable
fun SecondScreen() {
val model = viewModel<SharedModel>()
SomeView()
}
@Composable
fun SomeView() {
val model = viewModel<SharedModel>()
}
推荐阅读
- python-3.x - 什么原因导致“进入 DLASCLS 参数编号 4 时具有非法值”错误,我该如何解决?
- c# - 属性“背景”不支持 xamarin 表单中的“框架”类型错误值
- string - 将 esp 指向字符数组
- kubernetes - 如何使用 yml 文件在 K8S(Minikube)上公开一个简单的 rabbitmq 部署?
- core-data - 带有 CoreData 的 TextField
- oracle - 在 Oracle Analytics Server 5.5.0 中导入 .dva 文件时出现未知错误
- c# - C# 动态数据解析为 DateTime
- java - 在java中解密pdf文件时出错
- javascript - 反应原生 | 导入文件性能
- python - 选择特定的 substing - 动态索引