Jetpack compose：如何使用动画、嵌套导航和允许视图模型在模态底部表中实现导航

Question

所以基本上我有一个应用程序，它有一个屏幕和三个模态底页。 我需要一个导航基础设施来帮助我在应用程序的多个底部工作表之间导航。 它应该具有过渡动画、对 ViewModel 的支持以及嵌套和独立导航。

由于我是 Compose 新手，因此我需要一个非常易于实施的指南。

Answer 1

您可以查看 android 文档以了解视图模型集成（ 视图模型文档），如果您需要额外的依赖注入，您可以查看 Koin of Hilt 库。

与导航相同，您可以使用 NavHost 和导航控制器在屏幕或对话框之间导航，导航文档。 如果您需要导航到底部工作表，或者使用动画进行导航，accompanist 为该导航动画和导航材料提供了两个简单的库。

导航库中默认支持嵌套导航，在 NavHost DSL 中使用“导航”块。

有关如何使用导航和视图模型的指南，您可以查看： navigation with view model

如果你想要一个非常简短的例子，你最终会得到类似的东西：

// In you're MainActivity, inside a Scaffold or something like that, it will be you're root composable
val navController = rememberNavController()
NavHost(
    navController = navController,
    startDestination = "home",
) {
    // Main navigation graph
    composable("home") { HomeScreenComposable() }
    bottomSheet("my_dialog") { MyDialogComposable() }

    // Nested navigation graph
    navigation(
        startDestination = "nested_home",
        route = "nested_navigation_graph"
    ) { 
        bottomSheet("my_nested_dialog") { MyNestedDialogComposable() }
    }
}

@Composable    
fun HomeScreenComposable(viewModel: HomeViewModel = viewModel()) {
    // You're view goes here, and you can access the view model directly
}

// And if you need to navigate to a dialog or another composable
navController.navigate("my_dialog")