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


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

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

הגדרה

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

Kotlin

dependencies {
    def wear_compose_version = "1.5.0"
    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:‏

Kotlin

val navController = rememberSwipeDismissableNavController()

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

Kotlin

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

בדומה ל-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

מידע נוסף על Jetpack Navigation זמין במאמר ניווט באמצעות Compose או ב-Jetpack Compose Navigation code lab.