标签: jetpack-compose-navigation

我最近开始使用 Jetpack Compose。我有以下可组合项：

@Composable
fun SearchScreen(navController: NavHostController) {
    Scaffold(
        topBar = { SearchBar() },
        content = {
            Column (
                modifier = Modifier.fillMaxSize()
            ) {
                // some nested Composables
            }
        }
    )
}

但按原样使用此代码，其中的整个代码content = {...}都用红色下划线表示Jetpack Compose: Content padding parameter it is not used。我已经在这篇Stackoverflow 帖子中读到，实际上，PaddingValues只有在设置了 的情况下才在脚手架中提供bottomBar，这显然不是这里的情况。所以我不明白为什么我会收到这个错误。

注意：该应用程序实际上确实使用了 a BottomNavigation，但不在Composable我上面显示的范围内。难道这仍然以某种方式在这里传播吗？

我正在使用compose-navigation(alpha09) 来处理可组合项之间的导航

我想在移动到下一个目的地时删除启动屏幕（我不希望按下后背返回启动屏幕）

以下尝试未按预期工作：

navHostController.navigate(Route.login.id) {
    navHostController.graph.clear()
}

navHostController.navigate(Route.login.id)
navHostController.graph.clear()

val currentDest = navHostController.currentDestination
navHostController.navigate(Route.login.id)
if (currentDest != null) {
   navHostController.graph.remove(currentDest)
}

那么如何删除启动屏幕然后转到下一步呢？

从文档中，我可以传递字符串、整数等。但是如何在导航上传递对象呢？

注意：如果我设置参数类型 Parcelable，则应用程序会崩溃并显示java.lang.UnsupportedOperationException: Parcelables don't support default values..

composable(
    "vendor/details/{vendor}",
        arguments = listOf(navArgument("vendor") {
            type = NavType.ParcelableType(Vendor::class.java)
        })
) {
// ...
}

我发现可组合屏幕在 Navhost 导航期间多次重新组合，以下示例显示了我如何将导航与日志集成以识别函数被调用的次数，

internal sealed class Screen(val route: String) {
  object Splash : Screen("splash")
  object Login : Screen("login")
  object Credentials : Screen("credentials/{type}") {
    fun createRoute(type: String) = "credentials/$type"
  }
}

@Composable
fun HostNavGraph(
  modifier: Modifier = Modifier,
  startDestination: String = Splash.route,
) {
  val navController = rememberNavController()
  val vm: CredentialsViewModel = getViewModel()
  NavHost(navController = navController, startDestination = startDestination, modifier = modifier) {
    composable(route = Splash.route) {
      Log.e("composable", " Splash")
      SplashScreen(openLogin = {
        navController.navigate(Login.route)
      }, openRegistration = { type ->
        navController.navigate(Credentials.createRoute(type)) …

考虑这个例子。

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

我正在尝试导航，比如说从入门到仪表板及其他，并在用户点击仪表板后弹出入门，但仍然通过“后退操作”，我最终再次入门。

这是示例代码：

@AndroidEntryPoint
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainUI()
        }
    }
}

@Composable
fun MainUI() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = "onboarding"
    ) {
        composable("onboarding") {
            Column {
                Text("I am on onboarding")
                Button(onClick = {
                    navController.navigate("dashboard") {
                        popUpTo("dashboard") // I want to get rid of onboarding here
                    }
                }) {
                    Text("go to dashboard")
                }
            }
        }
        composable("dashboard") {
            Column {
                Text("I am on dashboard")
                Button(onClick = { …

我有一个导航图，如下所示：

@Composable
fun NavGraph (
    navController: NavHostController
) {
    NavHost(
        navController = navController,
        startDestination = "Products"
    ) {
        composable(
            route = "Products"
        ) {
            ProductsScreen(
                navController = navController
            )
        }
        composable(
            route = "Product Details",
            arguments = listOf(
                navArgument("product") {
                    type = NavType.SerializableType(Product::class.java)
                }
            )
        ) {
            val product = navController.previousBackStackEntry?.arguments?.getSerializable("product") as Product
            ProductDetailsScreen(
                navController = navController,
                product = product
            )
        }
    }
}

在 ProductDetailsS​​creen 内，我希望单击产品以进一步导航到传递 Product 对象的详细信息屏幕：

LazyColumn {
    items(
        items = products
    ) { product ->
        ProductCard( …

所以我有一个正在撰写的应用程序，它已将 startDestination 设置为带有脚手架的屏幕，底部导航栏有 3 个项目和顶部应用程序栏，我可以在 3 个底部导航选项卡中导航。但是假设我想单击底部选项卡屏幕之一中的一张卡片，该卡片应该打开一个没有底部栏和应用程序栏的详细信息屏幕（由于 Navhost 位于脚手架内，底部和顶部栏也会显示在详细信息屏幕上），什么这样做的正确方法是什么？目前我已尝试以下方法：-

1. 在新活动中启动详细信息屏幕。

2. 使用 currentDestination 路由作为状态，有条件地隐藏详情屏幕路由的底部和应用栏。

两种方法都有效，但是第一种方法的问题是，不建议在喷气背包导航中使用多个活动，相反，我们应该坚持单个活动，如果我想从详细信息转移到详细信息，它也会进一步破坏导航。另一个屏幕。第二种方法的问题在于，隐藏和显示底部/顶部栏会在屏幕之间产生非常糟糕的过渡，并且应用程序感觉不流畅。

因此，我正在寻找一种适当的方法来按照指南处理此问题，尽管我找不到任何相关信息。

更新

我根据路线显示/隐藏底部和应用程序栏，结果发现我面临的糟糕且滞后的动画是因为我正在运行一个调试应用程序，以及一个带有minifyEnabled true（R8）的发布应用程序，过渡非常平滑和自然，正如我想要的那样。

事实证明，根据 Google 的官方撰写示例应用程序JetSnack，这是实现从底部栏屏幕到非底部栏屏幕导航的适当方法。感谢@vitidev在评论中指出这一点。

我正在尝试将 Jetpack Compose 导航应用到我的应用程序中。

我的屏幕：登录/注册屏幕和底部导航栏屏幕（呼叫、聊天、设置）。

我已经发现最好的方法是使用嵌套图。

但我不断遇到ViewModelStore should be set before setGraph call例外。但是，我认为这不是正确的例外。

我的导航已经是最新版本了。可能我的嵌套图逻辑不正确。

要求：我希望能够从登录或注册屏幕导航到任何底部栏屏幕并反向导航

@Composable
fun SetupNavGraph(
    navController: NavHostController,
    userViewModel: UserViewModel
) {
    NavHost(
        navController = navController,
        startDestination = BOTTOM_BAR_GRAPH_ROUTE,
        route = ROOT_GRAPH_ROUTE
    ) {
        loginNavGraph(navController = navController, userViewModel)
        bottomBarNavGraph(navController = navController, userViewModel)
    }
}

导航图.kt

fun NavGraphBuilder.loginNavGraph(
    navController: NavHostController,
    userViewModel: UserViewModel
) {
    navigation(
        startDestination = Screen.LoginScreen.route,
        route = LOGIN_GRAPH_ROUTE
    ) {
        composable(
            route = Screen.LoginScreen.route,
            content = {
                LoginScreen(
                    navController = navController,
                    loginViewModel = userViewModel …

我的应用程序具有以下结构，并且由于路线 B ​​有自己的底部导航栏，因此有自己的 NavHost，因此我如何从屏幕 C（从选项卡栏打开）导航到路线 A？

 - Nested Route "/onboarding_route", startDestination = 'start' 
     - route 'start' -> Screen 'Login' (Composable)
     - route 'legal' -> Screen 'Legal' (Composable)

- Nested Route "/login_route", startDestination = 'login' 
     - route 'login' -> Screen 'Login' (Composable)
     - route 'register' -> Screen 'Register' (composable)
     - route 'recover' -> Screen 'Recover' (composable)

- Nested Route '/main_app', startDestination 'dashboard' => with bottom navigation
     - route 'dashboard' -> Screen 'Dashboard' (composable)
     - route 'product' -> Screen 'Product' (composable)
     - …