Jetpack Compose中如何通过Auth嵌套导航图传递手机号至OTP页面？

要在Auth嵌套导航里从LoginScreen把手机号传给OtpScreen，只需按以下步骤修改现有代码：

1. 更新Screens路由定义，添加参数占位符 #

给Otp路由添加参数占位符，并新增方法拼接带参数的完整路由：

sealed class Screens(val route: String) {
    object ScreenLoginRoute : Screens(route = "Login")
    object ScreenOtpRoute : Screens(route = "Otp/{mobile}") {
        // 生成带手机号参数的路由
        fun createRoute(mobile: String) = "Otp/$mobile"
    }
    // 补充原代码缺失的AuthRoute定义
    object AuthRoute : Screens(route = "Auth")
}

2. 修改Auth嵌套导航图，配置参数类型 #

在Otp页面的composable中声明参数类型，让导航组件正确解析传递的参数：

fun NavGraphBuilder.authGraph(navController: NavController){
    navigation(startDestination = Screens.ScreenLoginRoute.route, route = Screens.AuthRoute.route){
        composable(route = Screens.ScreenLoginRoute.route) {backStackEntry ->
            LoginScreen(navController)
        }
        composable(
            route = Screens.ScreenOtpRoute.route,
            // 声明参数为字符串类型，可设置默认值避免参数缺失崩溃
            arguments = listOf(
                navArgument("mobile") {
                    type = NavType.StringType
                    defaultValue = ""
                }
            )
        ) { backStackEntry ->
            // 从导航栈条目里获取传递的手机号
            val mobile = backStackEntry.arguments?.getString("mobile") ?: ""
            OtpScreen(navController = navController, mobile = mobile)
        }
    }
}

3. 调整LoginScreen的跳转逻辑，传递手机号 #

在LoginScreen中调用navigate时，用createRoute方法拼接带手机号的路由：

// 假设mobileNumber是LoginScreen中获取到的用户手机号
navController.navigate(Screens.ScreenOtpRoute.createRoute(mobileNumber))

4. 确保OtpScreen正确接收参数 #

你的OtpScreen已定义mobile: String参数，现在只需确保导航图传递的参数能正确传入即可（步骤2已处理）。如果需要处理空参数场景，可在组件内补充判断：

@OptIn(ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class)
@Composable
fun OtpScreen(navController: NavController, mobile: String) {
    // 使用mobile参数，例如显示提示文本
    Text(text = "请输入${mobile}收到的验证码")
}

整个流程遵循Jetpack Compose Navigation的参数传递规范，避免了硬编码路由字符串的问题，确保嵌套导航内参数传递稳定可靠。

内容的提问来源于stack exchange，提问作者SasidharanIOS