Kotlin多平台桌面Compose：屏幕导航传参及依赖配置问题

问题根源 #

Android官方的androidx.navigation:navigation-compose仅适配Android平台，依赖Android专属API，无法在Compose Desktop（JVM平台）中使用，这是你遇到依赖解析失败的核心原因。需要改用Compose Multiplatform官方导航库来实现桌面端导航。

正确构建脚本（build.gradle.kts） #

import org.jetbrains.compose.compose
import org.jetbrains.compose.desktop.application.dsl.TargetFormat

plugins {
    kotlin("multiplatform")
    id("org.jetbrains.compose") version "1.5.10"
}

group = "com.example"
version = "1.0-SNAPSHOT"

repositories {
    google()
    mavenCentral()
    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
}

kotlin {
    jvm {
        compilations.all {
            kotlinOptions.jvmTarget = "11"
        }
        withJava()
    }
    sourceSets {
        val jvmMain by getting {
            dependencies {
                implementation(compose.desktop.currentOs)
                // Compose Multiplatform官方导航库，版本与Compose版本对齐
                implementation("org.jetbrains.compose.navigation:navigation:1.5.10")
            }
        }
        val jvmTest by getting
    }
}

compose.desktop {
    application {
        mainClass = "MainKt"
        nativeDistributions {
            targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
            packageName = "NavTest"
            packageVersion = "1.0.0"
        }
    }
}

双屏幕带参数导航示例代码（Main.kt） #

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application
import org.jetbrains.compose.navigation.NavController
import org.jetbrains.compose.navigation.NavHost
import org.jetbrains.compose.navigation.composable
import org.jetbrains.compose.navigation.rememberNavController

fun main() = application {
    Window(onCloseRequest = ::exitApplication, title = "Compose Desktop 导航示例") {
        val navController = rememberNavController()
        // 导航宿主，配置路由与对应页面
        NavHost(navController = navController, startDestination = "home") {
            composable("home") { HomeScreen(navController) }
            // 路由中通过占位符{itemId}定义参数
            composable("detail/{itemId}") { backStackEntry ->
                // 从返回栈中获取传递的参数
                val itemId = backStackEntry.arguments?.getString("itemId") ?: "Unknown"
                DetailScreen(navController, itemId)
            }
        }
    }
}

// 首页：输入ID并跳转
fun HomeScreen(navController: NavController) {
    var inputId by remember { mutableStateOf("") }

    Column(
        modifier = Modifier.fillMaxSize().padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("首页")
        TextField(
            value = inputId,
            onValueChange = { inputId = it },
            placeholder = { Text("输入要传递的ID") },
            modifier = Modifier.padding(vertical = 16.dp)
        )
        Button(
            onClick = {
                if (inputId.isNotBlank()) {
                    // 通过路由拼接参数完成跳转
                    navController.navigate("detail/$inputId")
                }
            }
        ) {
            Text("跳转到详情页")
        }
    }
}

// 详情页：接收并显示ID，支持返回
fun DetailScreen(navController: NavController, itemId: String) {
    Column(
        modifier = Modifier.fillMaxSize().padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("详情页")
        Text("接收的ID：$itemId", modifier = Modifier.padding(vertical = 16.dp))
        Button(onClick = { navController.popBackStack() }) {
            Text("返回首页")
        }
    }
}

关键说明 #

• 导航库版本需与Compose版本保持一致，避免兼容性问题
• 路由参数传递采用路径占位符方式，与Android Compose导航逻辑一致
• 使用rememberNavController()获取导航控制器，NavHost管理所有路由页面

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