Navigasi dengan Compose untuk Wear OS

Komponen Navigasi di Android Jetpack memberikan dukungan untuk aplikasi Jetpack Compose. Anda dapat bernavigasi antar-composable sekaligus memanfaatkan infrastruktur dan fitur komponen Navigasi.

Halaman ini menjelaskan perbedaan dengan Navigasi Jetpack di Compose untuk Wear OS.

Penyiapan

Gunakan dependensi berikut dalam file build.gradle modul aplikasi Anda:

Kotlin

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

Ini digunakan, dan bukan artefak androidx.navigation:navigation-compose karena menyediakan implementasi alternatif khusus untuk Wear OS.

Membuat pengontrol navigasi, host, dan grafik

Menavigasi dengan Compose untuk Wear OS memerlukan tiga komponen yang sama, yang diperlukan pada aplikasi non-Wear OS: pengontrol navigasi, host, dan grafik.

Gunakan rememberSwipeDismissableNavController() untuk membuat instance WearNavigator, implementasi dari NavController yang sesuai untuk aplikasi Wear OS:

Kotlin

val navController = rememberSwipeDismissableNavController()

NavController adalah API utama yang digunakan untuk menavigasi di aplikasi Compose. API ini mengontrol navigasi antara composable dalam host navigasi yang, di Wear OS, adalah SwipeDismissableNavHost.

Kotlin

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

Seperti composable NavHost, diperlukan referensi ke pengontrol navigasi, rute untuk tujuan awal, dan builder untuk grafik navigasi yang ditampilkan di sini sebagai lambda akhir.

Tujuan awal harus disediakan di builder grafik navigasi, beserta semua tujuan lain yang harus dapat dijelajahi dengan pengontrol navigasi.

Di aplikasi Wear OS, deklarasikan SwipeDismissableNavHost sebagai konten Scaffold untuk mendukung komponen level teratas seperti waktu, indikator scroll/posisi, dan indikator halaman. Gunakan objek Horologist AppScaffold di atas SwipeDismissableNavHost dan Horologist ScreenScaffold di tingkat layar untuk menambahkan objek TimeText ke layar secara default dan untuk memastikannya dianimasikan dengan benar saat menavigasi antarlayar. Selain itu, ScreenScaffold menambahkan PositionIndicator untuk konten yang dapat di-scroll. 

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

Untuk mempelajari Navigasi Jetpack lebih lanjut, lihat Menavigasi dengan Compose atau ikuti codelab Navigasi Jetpack Compose.