使用 Compose for Wear OS 进行导航

Android Jetpack 中的导航组件为 Jetpack Compose 应用提供支持。您可以在可组合项之间自由导航，同时充分利用导航组件的底层基础设施与丰富功能。

本页介绍了 Compose for Wear OS 上的 Jetpack Navigation 的独特之处。

设置

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

Kotlin

dependencies {
    def wear_compose_version = "1.5.6"
    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 实现：

val navController = rememberSwipeDismissableNavController()
Navigation.kt

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

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

与 NavHost 可组合项类似，它接收一个导航控制器引用、起始目标路由以及导航图构建器（此处以尾随 lambda 形式呈现）。

在导航图构建器中，必须指定起始目标，同时配置所有可通过导航控制器访问的其他目标页面。

在 Wear OS 应用中，将 SwipeDismissableNavHost 声明为 AppScaffold 的内容，以支持时间、滚动或位置指示器和页面指示器等顶级组件。 在 SwipeDismissableNavHost 上方使用 AppScaffold 对象，并在屏幕层级配置 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")!!)
            }
        }
    }
}

// Implementation of one of the screens in the navigation
@Composable
fun MessageDetail(id: String) {
    // .. Screen level content goes here
    val scrollState = rememberTransformingLazyColumnState()

    val padding = rememberResponsiveColumnPadding(
        first = ColumnItemType.BodyText
    )

    ScreenScaffold(
        scrollState = scrollState,
        contentPadding = padding
    ) { scaffoldPaddingValues ->
        // Screen content goes here
        // ...
Navigation.kt

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