Wear OS 上的 Compose 导航

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

本页面介绍了 Compose for Wear OS 上 Jetpack 导航的不同之处。

设置

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

Kotlin

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

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

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

在 Wear OS 上使用 Compose 进行导航需要与非 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 声明为 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
    ) {
        // Screen content goes here
Navigation.kt

要了解有关 Jetpack 导航的更多信息，请参阅使用 Compose 导航或参加Jetpack Compose 导航代码实验。