רכיב הניווט ב-Android Jetpack מספק תמיכה באפליקציות Jetpack Compose. אתם יכולים לנווט בין קומפוזיציות תוך ניצול התשתית והתכונות של רכיב הניווט.
בדף הזה מתוארים ההבדלים בין Jetpack Navigation לבין Compose for Wear OS.
הגדרה
משתמשים בתלות הבאה בקובץ build.gradle של מודול האפליקציה:
Kotlin
dependencies { def wear_compose_version = "1.5.1" 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.
מומלץ
- הערה: טקסט הקישור מוצג כש-JavaScript מושבת
- העברה של Jetpack Navigation ל-Navigation Compose
- ניווט באמצעות 'פיתוח נייטיב'
- ניווט בין מסכים באמצעות התכונה 'כתיבה'