Jetpack Compose中NavHost传递两个变量出错问题求助

核心问题 #

1. 路由参数无分隔符：跳转时直接拼接两个变量字符串，未用/分隔，导致NavHost无法区分参数，将第一个变量的首字符识别为playerOneName，剩余全部内容归为playerTwoName。
2. 路由定义格式错误：NavHost中注册的路由未用/分隔参数占位符，无法正确匹配参数规则。
3. 字符串拼接语法错误：Button的跳转代码里存在语法疏漏，playerOneName"+"$playerTwoName缺少$符号，导致拼接逻辑混乱。
4. 状态赋值不规范：TwoPlayerGame中直接给remember创建的状态变量赋值，不符合Compose状态管理规则，可能引发重组异常。

修正后的代码 #

1. Button跳转逻辑修正

var playerOneName = "Mike"
var playerTwoName = "Allison"

Button(onClick = { 
    navController.navigate("${Destination.TwoPlayerGame.route}/$playerOneName/$playerTwoName")
}) {
    Text(text = "Start Game")
}

2. NavHost路由注册修正

@Composable
fun NavigationAppHost (navController: NavController) {
    NavHost(navController = navController as NavHostController, startDestination = "PlayerSelection") {
        composable(Destination.PlayerSelection.route)  { PlayerSelection(navController) }
        // 用/分隔参数占位符，保证路由格式合规
        composable("${Destination.TwoPlayerGame.route}/{playerOneName}/{playerTwoName}") { backStackEntry ->
            val playerOneName = backStackEntry.arguments?.getString("playerOneName")
            val playerTwoName = backStackEntry.arguments?.getString("playerTwoName")
            TwoPlayerGame(navController, playerOneName, playerTwoName) 
        }
        composable(Destination.ThreePlayerGame.route)  {ThreePlayerGame(navController)}
        composable(Destination.FourPlayerGame.route)  {FourPlayerGame(navController)}
    }
}

3. TwoPlayerGame组件修正

@Composable
fun TwoPlayerGame(navController: NavController, playerOneName: String?, playerTwoName: String?) {
    // 直接用参数初始化状态（无需修改的话也可直接使用参数）
    val plr1Name by remember { mutableStateOf(playerOneName ?: "") }
    val plr2Name by remember { mutableStateOf(playerTwoName ?: "") }
  
    Card(modifier = Modifier.fillMaxWidth()) {
        Column {
            Text("Two Player Game")
            Text("Player One = $plr1Name")
            Text("Player Two = $plr2Name")
        }
    }
}

额外建议 #

• 优先使用Safe Args插件传递参数，这是Jetpack Navigation官方推荐的类型安全方案，可避免手动拼接路径的错误，同时保障参数类型安全。
• 处理可能为空的参数时，用?:设置默认值，避免UI显示null。

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