ניווט באמצעות 'כתיבה' ב-Wear OS

גרסת Material של Compose ל-Wear OS ‫2.5 3

---

רכיב הניווט ב-Android Jetpack מספק תמיכה באפליקציות Jetpack Compose. אתם יכולים לנווט בין קומפוזיציות תוך ניצול התשתית והתכונות של רכיב הניווט.

בדף הזה מתוארים ההבדלים בין Jetpack Navigation לבין Compose for Wear OS.

הערה: אם אתם לא מכירים את רכיב הניווט, מומלץ לעיין במקורות המידע בנושא ניווט באמצעות Compose לפני שתמשיכו.

הגדרה

משתמשים בתלות הבאה בקובץ build.gradle של מודול האפליקציה:

Kotlin

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

השימוש בו הוא במקום ב-androidx.navigation:navigation-compose artifact כי הוא מספק הטמעות חלופיות שספציפיות ל-Wear OS.

יצירת בקר ניווט, מארח וגרף

כדי להשתמש ב-Compose for Wear OS, צריך את אותם שלושה רכיבים שנדרשים באפליקציות שאינן Wear OS: בקר הניווט, המארח והגרף.

משתמשים ב-rememberSwipeDismissableNavController() כדי ליצור מופע של WearNavigator, הטמעה של NavController שמתאימה לאפליקציות Wear OS:‏

val navController = rememberSwipeDismissableNavController()
Navigation.kt

‫NavController הוא ה-API העיקרי שמשמש לניווט באפליקציות של Compose. הוא שולט בניווט בין רכיבי Composable במארח הניווט, שב-Wear OS הוא SwipeDismissableNavHost.

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

בדומה ל-NavHost composable, הוא מקבל הפניה לבקר הניווט, את המסלול ליעד ההתחלה ואת ה-builder לגרף הניווט, שמוצג כאן כ-trailing lambda.

צריך לספק את יעד ההתחלה בכלי ליצירת גרף ניווט, יחד עם כל שאר היעדים שאליהם אפשר לנווט באמצעות בקר הניווט.

באפליקציית Wear OS, צריך להגדיר את SwipeDismissableNavHost כתוכן של AppScaffold כדי לתמוך ברכיבים ברמה העליונה כמו שעה, גלילה או מחוון מיקום ומחוון דף. משתמשים באובייקט AppScaffold מעל SwipeDismissableNavHost ו-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 code lab.