渐进式编程课
KMP 目录
第 26 课2026.08.11

Android 与 iOS 可以复用同一套路由、返回栈和页面跳转逻辑，不必分别维护首页到详情页的导航流程。

第 26 课：Compose 共享页面导航

知识点

使用 Navigation Compose 在 commonMain 中定义共享页面和跳转关系。

用途

Android 与 iOS 可以复用同一套路由、返回栈和页面跳转逻辑，不必分别维护首页到详情页的导航流程。

核心概念

  • Route：页面的唯一标识，只描述目的地，不负责绘制 UI。
  • NavController：保存返回栈，并通过 navigate() 和 popBackStack() 控制跳转。
  • NavHost：声明导航图以及应用启动时显示的页面。
  • navigate() 将新页面压入栈顶，popBackStack() 移除当前页面并返回上一页。

示例代码

先在共享模块添加 Navigation Compose；版本应与项目当前 Compose Multiplatform 版本保持兼容：

kotlin
kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("org.jetbrains.androidx.navigation:navigation-compose:2.9.2")
        }
    }
}

定义两个无参数路由，并在共享 App() 中组装导航图：

kotlin
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import kotlinx.serialization.Serializable

@Serializable
data object Home

@Serializable
data object Detail

@Composable
fun App() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = Home,
    ) {
        composable<Home> {
            Button(onClick = { navController.navigate(Detail) }) {
                Text("查看详情")
            }
        }

        composable<Detail> {
            Button(onClick = { navController.popBackStack() }) {
                Text("返回首页")
            }
        }
    }
}

类型安全路由使用 @Serializable，因此项目还需要启用 Kotlin Serialization 插件。

5 分钟练习

增加一个 Settings 路由，并在首页添加“打开设置”按钮；设置页点击“返回”后回到首页。

参考答案

kotlin
@Serializable
data object Settings

// 添加到 NavHost 内
composable<Settings> {
    Button(onClick = { navController.popBackStack() }) {
        Text("返回")
    }
}

// 添加到首页内容中
Button(onClick = { navController.navigate(Settings) }) {
    Text("打开设置")
}

与上一课的联系

上一课验证了单个共享组件的显示和点击事件；今天把这些组件组织成多个页面。下一步可以测试一次点击是否真的把导航栈切换到目标页面。

参考资料