Điều hướng bằng Compose cho Wear OS

Thành phần điều hướng trong Android Jetpack hỗ trợ các ứng dụng sử dụng công cụ Jetpack Compose. Bạn có thể di chuyển giữa các thành phần kết hợp (composable) trong khi tận dụng cơ sở hạ tầng và các tính năng của thành phần Điều hướng.

Trang này mô tả sự khác biệt với Jetpack Navigation trong Compose cho Wear OS.

Thiết lập

Sử dụng phần phụ thuộc sau trong tệp build.gradle của mô-đun ứng dụng:

Kotlin

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

Tệp này được dùng thay thế cho cấu phần phần mềm androidx.navigation:navigation-compose vì tệp này cung cấp các phương thức triển khai thay thế dành riêng cho Wear OS.

Tạo bộ điều khiển, bộ lưu trữ và biểu đồ để điều hướng

Tính năng điều hướng bằng Compose cho Wear OS yêu cầu 3 thành phần giống nhau cần có trên các ứng dụng không phải Wear OS: bộ điều khiển, bộ lưu trữ và biểu đồ điều hướng.

Sử dụng rememberSwipeDismissableNavController() để tạo một thực thể của WearNavigator, một phương thức triển khai NavController phù hợp với các ứng dụng Wear OS:

Kotlin

val navController = rememberSwipeDismissableNavController()

NavController là API chính dùng để di chuyển trong các ứng dụng sử dụng công cụ Compose. Thành phần này kiểm soát việc điều hướng các thành phần kết hợp trong bộ lưu trữ điều hướng trên Wear OS là SwipeDismissableNavHost.

Kotlin

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

Giống như thành phần kết hợp NavHost, thành phần này tham chiếu đến bộ điều khiển điều hướng, tuyến đường cho đích bắt đầu và trình tạo biểu đồ điều hướng hiển thị dưới dạng trailing lambda (lambda theo sau).

Bạn phải cung cấp đích bắt đầu trong trình tạo biểu đồ điều hướng, cùng với mọi đích đến khác có thể điều hướng được bằng bộ điều khiển điều hướng.

Trong ứng dụng Wear OS, hãy khai báo SwipeDismissableNavHost làm nội dung của Scaffold để hỗ trợ các thành phần cấp cao nhất như thời gian, chỉ báo cuộn/vị trí và chỉ báo trang. Sử dụng đối tượng Horologist AppScaffold phía trên SwipeDismissableNavHost và Horologist ScreenScaffold ở cấp màn hình để thêm đối tượng TimeText vào màn hình theo mặc định và đảm bảo đối tượng đó tạo ảnh động chính xác khi di chuyển giữa các màn hình. Ngoài ra, ScreenScaffold thêm một PositionIndicator cho nội dung có thể cuộn. 

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

Để tìm hiểu thêm về Điều hướng Jetpack, hãy xem phần Điều hướng bằng Compose hoặc tham gia Lớp học lập trình về Điều hướng trong Jetpack Compose.