Jetpack 使用 viewModel 组合导航

Question

我正在尝试在 内使用 Jetpack Compose 导航viewModel。当导航被触发时，什么也不会发生。这是我的方法：

我定义NavigationDestination. 就我而言，我有四个屏幕：欢迎、登录、注册和调查

interface NavigationDestination {
    val route: String
}

sealed class Screen(override val route: String) : NavigationDestination {

    object WelcomeScreen : Screen("welcome")
    object SignInScreen : Screen("signIn")
    object SignUpScreen : Screen("signUp")
    object SurveyScreen : Screen("survey")

}

，它Navigator使用默认屏幕 公开当前目的地WelcomeScreen。

class Navigator {

    var destination: MutableStateFlow<NavigationDestination> = MutableStateFlow(Screen.WelcomeScreen)

    fun navigate(destination: NavigationDestination) {
        this.destination.value = destination
    }

}

在主可组合项中，我获取NavHostController并监听 的更改Navigator。

@Composable
fun JetSurvey0App() {
    val welcomeViewModel: WelcomeViewModel = viewModel(factory = WelcomeViewModelFactory())
    val navigator = Navigator()
    val navController = rememberNavController()
    val destination by navigator.destination.collectAsState()

    LaunchedEffect(destination) {
        if (navController.currentDestination?.route != destination.route) {
            navController.navigate(destination.route)
        }
    }

    NavHost(navController = navController, startDestination = navigator.destination.value.route) {
        composable(Screen.WelcomeScreen.route) {
            WelcomeScreen(
                onEvent = { event ->
                    when (event) {
                        is WelcomeEvent.SignInSignUp -> welcomeViewModel.handleContinue(event.email)
                        WelcomeEvent.SignInAsGuest -> welcomeViewModel.signInAsGuest()
                    }
                }
            )
        }
        composable(Screen.SignUpScreen.route) {
            SignUp()
        }
        composable(Screen.SignInScreen.route) {
            SignIn()
        }
        composable(Screen.SurveyScreen.route) {
            SurveyQuestionsScreen()
        }


    }
}

在这里，WelcomeViewModel我通过调用类似的方法来执行解耦导航Navigator。

class WelcomeViewModel(
    private val userRepository: UserRepository,
    private val navigator: Navigator
    ) : ViewModel() {

    fun handleContinue(email: String) {
        if (userRepository.isKnownUserEmail(email)) {
            viewModelScope.launch {
              navigator.navigate(Screen.SignInScreen)
            }
        } else {
          viewModelScope.launch {
              navigator.navigate(Screen.SignUpScreen)
          }
        }
    }

    fun signInAsGuest() {
        viewModelScope.launch {
            navigator.navigate(Screen.SurveyScreen)
        }
        userRepository.signInAsGuest()
    }


}

class WelcomeViewModelFactory : ViewModelProvider.Factory {
    @Suppress("UNCHECKED_CAST")
    override fun <T : ViewModel> create(modelClass: Class<T>): T {
        if (modelClass.isAssignableFrom(WelcomeViewModel::class.java)) {
            return WelcomeViewModel(UserRepository, Navigator()) as T
        }
        throw IllegalArgumentException("Unknown ViewModel class")
    }
}

Answer 1

collectAsState每次向流发出新值时都会触发重组。这意味着，JetSurvey0App将被重新调用。

您尝试使用 进行导航navigator.destination，但在每次重组时都会创建一个新对象：

val navigator = Navigator()
val destination by navigator.destination.collectAsState()

当你改变这个特定对象的状态时，你可以制作你的WelcomeViewModel.navigator public替代品private并收集它。destination

在Compose Mental Model中阅读有关重组的更多信息。