使用 Compose for Wear OS 进行导航

Android Jetpack 中的导航组件支持 Jetpack Compose 应用。您可以在利用导航组件的基础架构和功能的同时，在可组合项之间导航。

本页介绍了与 Compose for Wear OS 上的 Jetpack Navigation 之间的差异。

设置

在应用模块的 build.gradle 文件中使用以下依赖项：

Kotlin


dependencies {
    def wear_compose_version = "1.4.0"
    implementation "androidx.wear.compose:compose-navigation:$wear_compose_version"
}

这用于替代 androidx.navigation:navigation-compose 工件，因为它提供了特定于 Wear OS 的替代实现。

创建导航控制器、导航主机和导航图

使用 Compose for Wear OS 进行导航需要的三个组件与非 Wear OS 应用相同：导航控制器、导航主机和导航图。

使用 rememberSwipeDismissableNavController() 创建一个 WearNavigator 实例，它是适用于 Wear OS 应用的 NavController 实现：

Kotlin


val navController = rememberSwipeDismissableNavController()

NavController 是用于在 Compose 应用中进行导航的主要 API。它用于控制导航主机（在 Wear OS 中为 SwipeDismissableNavHost）中的可组合项之间的导航。

Kotlin

val navController = rememberSwipeDismissableNavController()
SwipeDismissableNavHost(
    navController = navController,
    startDestination = "message_list"
) {
    // TODO: build navigation graph
}

与 NavHost 可组合项一样，它接受对导航控制器、起始目的地路线以及导航图构建器（此处显示为尾随 lambda）的引用。

必须在导航图构建器中提供起始目的地，以及应能够使用导航控制器进行导航的所有其他目的地。

在 Wear OS 应用中，将 SwipeDismissableNavHost 声明为 Scaffold 的内容，以支持时间、滚动/位置指示器和页面指示器等顶级组件。在屏幕级别使用 SwipeDismissableNavHost 上方的 Horologist AppScaffold 对象，并在屏幕级别使用 Horologist ScreenScaffold，以便默认将 TimeText 对象添加到屏幕，并确保它在屏幕之间导航时能够正确呈现动画效果。此外，ScreenScaffold 还会为可滚动内容添加 PositionIndicator。

AppScaffold {
    val navController = rememberSwipeDismissableNavController()
    SwipeDismissableNavHost(
        navController = navController,
        startDestination = "message_list"
    ) {
        composable("message_list") {
            MessageList(onMessageClick = { id ->
                navController.navigate("message_detail/$id")
            })
        }
        composable("message_detail/{id}") {
            MessageDetail(id = it.arguments?.getString("id")!!)
        }
    }
}
// ...
// .. Screen level content goes here
val scrollState = rememberScrollState()

ScreenScaffold(scrollState = scrollState) {
    // Screen content goes here
Navigation.kt

如需详细了解 Jetpack Navigation，请参阅使用 Compose 进行导航或完成 Jetpack Compose Navigation Codelab。