从JetPack Compose中的ViewModel导航的正确方法是什么？ Hilt＆＃x2B; ViewModel？

Question

我偶然发现了这个非常琐碎但棘手的问题。我花了很多时间搜索官方文档，但不幸的是没有找到答案。

官方文档说，您应该将navcontroller的实例传递给@composable -s，并将其称为onclick = {navcontroller.navigate（“ path”） }。但是，如果我必须从ViewModel触发导航事件（例如，重定向到登录，重定向到新创建的Post Page），会发生什么？等待@composable中的任何coroutine（ex。http请求）不仅很糟糕，而且可能会迫使Android杀死App，因为被阻止的UI线程

非正式的解决方案（主要记录了中等文章的形式）是基于拥有单身类和观察一些mutableStateFlow包含路径的概念。

从理论上讲，这听起来很愚蠢，并且在实践中没有太大帮助（副作用和重新组成友好，触发不必要的重新启动）。

Answer 1

我自己一直在挣扎着完全相同的问题。 特别是体系结构事件部分 i i'我想知道他们的建议是将状态用作导航的触发因素吗？

引用文档：

例如，在实现登录屏幕时，点击登录按钮应导致您的应用显示进度旋转器和网络调用。如果登录成功，则您的应用程序会导航到其他屏幕；如果出现错误，该应用显示一个Snackbar。您将如何建模屏幕状态和事件：

They have provided the following snippet of code for the above requirement:

sealed class UiState {
    object SignedOut : UiState()
    object InProgress : UiState()
    object Error : UiState()
    object SignIn : UiState()
}

class MyViewModel : ViewModel() {
    private val _uiState = mutableStateOf<UiState>(SignedOut)
    val uiState: State<UiState>
        get() = _uiState
}

What they did not provide is the rest of the view model and compose code. I'm guessing it's supposed to look like:

@Composable
fun MyScreen(navController: NavController, viewModel: MyViewModel) {
    when(viewModel.uiState){
        is SignedOut ->  // Display signed out UI components
        is InProgress -> // Display loading spinner
        is Error ->      // Display error toast

        // Using the SignIn state as a trigger to navigate
        is SignIn ->     navController.navigate(...)  
    }
}

Also the view model could have a function like this one (trigger by clicking a "sign in" button from compose screen

fun onSignIn() {
    viewModelScope.launch {
        // Make a suspending sign in network  call
        _uiState.value = InProgress

         // Trigger navigation
        _uiState.value = SignIn
    }
}

Answer 2

continue

Answer 3

我的方式比@phil Dukhov类似。我创建了一个包装程序类，该类复制已经在remame> remamenavcontroller（）中找到的代码：

class NavigationService constructor(
    context: Context,
) {
    val navController = NavHostController(context).apply {
        navigatorProvider.addNavigator(ComposeNavigator())
        navigatorProvider.addNavigator(DialogNavigator())
    }
}

然后使用刀柄我为我的navHostController创建了一个提供商。由于我需要navController遍历嵌套navHost，因此决定将其范围范围范围范围固定到viewModel

@Module
@InstallIn(ViewModelComponent::class)
object NavigationModule {
    @Provides
    fun provideNestedNavController(@ApplicationContext context: Context): NavHostController {
        return NavigationService(context).navController}
}

这使我可以直接将navController注入我的ViewModel，并从内部触发导航。然后，我可以通过以下方式从我的组件访问NavController：

val navController: NavHostController = viewModel.navController  

为了构建嵌套navgraph

Answer 4

我已经使用了几个月，但没有遇到任何问题。我喜欢它，因为它很简单。我的产品版本使用Koin注入NavigationManager Singleton（而不是Hilt）。为了简化此示例，我发布了一种基于对象的方法。

sealed interface Route {
    @Serializable
    data object Home : Route

    @Serializable
    data object Screen1 : Route
}

/**
 * Centralized navigation manager that emits screen events
 * to be consumed by the [NavigatorLaunchedEffect] composable.
 */
object NavigationManager {
    private val _route = MutableSharedFlow<Route>()
    val route: SharedFlow<Route> = _route

    fun navigateTo(event: Route) {
        _route.tryEmit(event)
    }

    suspend fun navigateToAsync(event: Route) {
        _route.emit(event)
    }
}

/**
 * This composable LaunchedEffect collects navigation events
 * from the [NavigationManager] and navigates to the next
 * emitted screen.
 */
@Composable
fun NavigatorLaunchedEffect(
    navController: NavHostController,
) {
    LaunchedEffect("NavigationEvents") {
        NavigationManager.route.collect { screen ->
            navController.navigate(screen)
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Surface {
                    val navController = rememberNavController()

                    // Listen and respond to navigation events.
                    NavigatorLaunchedEffect(navController = navController)

                    NavHost(navController = navController, startDestination = Route.Home) {
                        composable<Route.Home> {  
                            HomeScreen()
                        }
                        composable<Route.Screen1> {
                            Screen1()
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun HomeScreen() {
    Button(
        onClick = {
            NavigationManager.navigateTo(Route.Screen1)
        }
    ) {
        Text("Navigate to Screen1")
    }
}

@Composable
fun Screen1() {
    Text("Screen1")
}