Navigasi dengan Compose untuk Wear OS

Compose untuk Wear OS versi Material 2.5 3

---

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.

Catatan: Jika Anda tidak terbiasa dengan komponen Navigasi, tinjau referensi Menavigasi dengan Compose sebelum melanjutkan.

Penyiapan

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

Kotlin

dependencies {
    def wear_compose_version = "1.5.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 AppScaffold untuk mendukung komponen level teratas seperti waktu, indikator scroll/posisi, dan indikator halaman. Gunakan objek AppScaffold di atas SwipeDismissableNavHost dan ScreenScaffold di tingkat layar untuk menambahkan objek TimeText ke layar secara default dan untuk memastikannya dianimasikan dengan benar saat bernavigasi 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")!!)
            }
        }
    }
}

// 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

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