如何在Jetpack Compose Navigation中传递用户名参数？

步骤1：修正路由定义 #

先确保你的Screen枚举类里，Home路由包含参数占位符：

enum class Screen(val route: String) {
    Login("Login_Screen"),
    SignUp("SignUp_Screen"),
    Home("Home_Screen/{username}"), // 添加{username}作为参数占位符
    Detail("Detail_Screen")
}

步骤2：配置Home导航图的参数接收 #

在homeNavGraph中，为HomeScreen的composable添加参数配置：

fun NavGraphBuilder.homeNavGraph(navController: NavHostController){
    navigation(startDestination = Screen.Home.route,
        route = HOME_ROUTE){
        composable(route = Screen.Home.route,
            arguments = listOf(
                navArgument("username") {
                    type = NavType.StringType
                    nullable = false // 此处username为必填参数
                }
            )
        ){ backStackEntry ->
            // 从回退栈中提取参数
            val username = backStackEntry.arguments?.getString("username") ?: ""
            HomeScreen(navController = navController, username = username)
        }
        composable(route = Screen.Detail.route){
            DetailScreen(navController = navController)
        }
    }
}

步骤3：修正Auth导航图的Login路由 #

你之前错误地给LoginScreen添加了参数，Login作为登录起始页不需要接收参数，改回原样：

fun NavGraphBuilder.authNavGraph(navController: NavHostController){
    navigation(startDestination = Screen.Login.route,
        route = AUTHENTICATION_ROUTE){
        composable(route = Screen.Login.route){
            LoginScreen(navController = navController)
        }
        composable(route = Screen.SignUp.route){
            SignUpScreen(navController = navController)
        }
    }
}

步骤4：修改LoginScreen的跳转逻辑 #

在Login按钮的点击事件中，把输入的Username拼接到跳转路由里：

@Composable
fun LoginScreen(navController: NavController) {
    var username by remember { mutableStateOf("") } // 变量名遵循Kotlin小写开头规范
    val maxChar = 5
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Blue),
        contentAlignment = Alignment.Center
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            // 原有UI代码保持不变...

            Button(onClick = { 
                // 替换路由占位符，传入当前输入的username
                val homeRoute = Screen.Home.route.replace("{username}", username)
                navController.navigate(homeRoute) 
            }) {
                Text(text = "Login")
            }

            // Register按钮代码不变...
        }
    }
}

步骤5：更新HomeScreen接收参数 #

让HomeScreen定义接收username的参数并使用：

@Composable
fun HomeScreen(navController: NavController, username: String) {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Text(text = "Welcome, $username!", fontSize = 24.sp)
    }
}

关键提示 #

• 路由中的{参数名}必须和navArgument里的名称完全一致
• 传递参数时通过字符串替换或直接拼接的方式注入参数值
• 接收参数时注意处理空值，避免空指针异常

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