考虑这个例子。
对于身份验证,我们将使用 2 个屏幕 - 一个屏幕用于输入电话号码,另一个屏幕用于输入 OTP。
这两个屏幕都是在 Jetpack Compose 中制作的,对于 NavGraph,我们使用组合导航。
另外我必须提到 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 组合 NavGraph 中的两个或多个可组合项之间共享相同的视图模型呢?
你可以通过你的顶部viewModelStoreOwner
到每个目的地
- 直接传递到
.viewModel()
call, 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>()
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)