我可以在 Jetpack Compose Navigaiton 的路径中使用可选参数吗？

Question

我有这个导航图

fun NavGraphBuilder.manageAvailabilityGraph() {
    composable(
        "availability/{id}",
        arguments = listOf(
            navArgument("id") {
                type = NavType.StringType
                nullable = true
            },
        ),
    ) {
        ManageAvailabilityScreen()
    }
}

我想我可以同时使用它

navHostController.navigate("availability")
navHostController.navigate("availability/123")

但是第一个不起作用，我明白了

java.lang.IllegalArgumentException: Navigation destination that matches request NavDeepLinkRequest{ uri=android-app://androidx.navigation/availability } cannot be found in the navigation graph NavGraph(0x0) startDestination={Destination(0xcfbbf7da) route=home}

我通过提供两条不同的路线来修复它。

fun NavGraphBuilder.manageAvailabilityGraph() {
    composable(
        "availability",
    ) {
       ManageAvailabilityScreen()
    }

    composable(
        "availability/{id}",
        arguments = listOf(
            navArgument("id") {
                type = NavType.StringType
                nullable = true
            },
        ),
    ) {
        ManageAvailabilityScreen()
    }
}

但是，我想知道是否可以将两者结合起来，只有一条名为“可用性”的路线，这样我就不需要重复“可用性”？从本质上讲，两者都使用相同的屏幕。

我尝试过类似的方法，但不起作用。

fun NavGraphBuilder.manageAvailabilityGraph() {
    composable(
        "availability",
    ) {

        ManageAvailabilityScreen()

        navigation(startDestination = "{id}", "{id}") {
            composable(
                "{id}",
                arguments = listOf(
                    navArgument("id") {
                        type = NavType.StringType
                    },
                ),
            ) {
                ManageAvailabilityScreen()
            }
        }
    }
}

Answer 1

您可以将

id

标记为路线中的可选参数。请参阅文档

fun NavGraphBuilder.manageAvailabilityGraph() {
    composable(
        "availability?id={id}",
        arguments = listOf(
            navArgument("id") {
                type = NavType.StringType
                nullable = true
            },
        ),
    ) {
        ManageAvailabilityScreen()
    }
}

导航时您可以使用，

navHostController.navigate("availability")
navHostController.navigate("availability?id=123")

Answer 2

您可以使用“可选参数”如下

屏幕.Kt

const val PASTED_TEXT_ARG_KEY = "pasted_screen_arg_key"

sealed class Screen(val route: String) {
    data object Translate : Screen(route = "translate_screen/{$PASTED_TEXT_ARG_KEY}") {
        fun passPastedText(pastedText: String? = null): String {
            return "translate_screen/$pastedText"
        }
    }
}

NavGraph.Kt

@Composable
fun SetupNavGraph(
    navController: NavHostController,
    startDestination: String
) {
    NavHost(navController, startDestination) {
        composable(
            route = Screen.Translate.route,
            arguments = listOf(
                navArgument(PASTED_TEXT_ARG_KEY) {
                    nullable = true
                    type = NavType.StringType
                }
            )
        ) {
            it.arguments?.getString(PASTED_TEXT_ARG_KEY).let { pastedText ->
                TranslateScreen(
                    navController = navController,
                    pastedText = pastedText
                )
            }
        }
    }
}

使用示例

navController.navigate(Screen.Translate.passPastedText()) // Or use following
navController.navigate(Screen.Translate.passPastedText("with_some_value"))