8

考虑这个例子。

对于身份验证，我们将使用 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 中的两个或多个可组合组件之间共享相同的视图模型呢？

4

2 回答 2

11

您可以将您的顶部传递viewModelStoreOwner到每个目的地

  1. 直接传递给.viewModel()调用，composable("first")在我的例子中
  2. 覆盖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>()
}
于 2021-08-20T06:35:31.547 回答
5

使用 Hilt，您可以执行以下操作。但是由于您使用的是 Koin，所以我还不知道 Koin 的方式。

@Composable
fun MyApp() {
    NavHost(navController, startDestination = startRoute) {
        navigation(startDestination = innerStartRoute, route = "Parent") {
            // ...
            composable("exampleWithRoute") { backStackEntry ->
                val parentEntry = remember {
                  navController.getBackStackEntry("Parent")
                }
                val parentViewModel = hiltViewModel<ParentViewModel>(
                  parentEntry
                )
                ExampleWithRouteScreen(parentViewModel)
            }
        }
    }
}

官方文档：https ://developer.android.com/jetpack/compose/libraries#hilt

于 2021-08-26T18:41:55.887 回答