android-jetpack-compose - 如何在 Compose NavGraph 内的两个或多个 Jetpack 可组合之间共享 View 模型？

Question

考虑这个例子。
对于身份验证，我们将使用 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 compose NavGraph 中的两个或多个可组合项之间共享相同的 View 模型？

Answer 1

您可以通过您的顶viewModelStoreOwner到每个目的地

直接传给.viewModel()调用，composable("first")在我的例子中

覆盖 LocalViewModelStoreOwner对于整个内容，因此每个内容都可以在 CompositionLocalProvider 内组合将可以访问相同的 View 模型，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>()
}