רכיב הניווט ב-Android Jetpack מספק תמיכה באפליקציות של Jetpack פיתוח נייטיב. אתם יכולים לנווט בין רכיבים מורכבים תוך ניצול התשתית והתכונות של רכיב הניווט.
בדף הזה מתוארים ההבדלים ביחס ל-Jetpack Navigation ב-Compose ל-Wear OS.
הגדרה
משתמשים ביחס התלות הבא בקובץ build.gradle של מודול האפליקציה:
Kotlin
dependencies { def wear_compose_version = "1.4.1" implementation "androidx.wear.compose:compose-navigation:$wear_compose_version" }
משתמשים בו במקום הארטיפקט androidx.navigation:navigation-compose
כי הוא מספק הטמעות חלופיות שספציפיות ל-Wear OS.
יצירת רכיבי ניווט, מארח וגרף
כדי לנווט באמצעות Compose ל-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 של תרשים הניווט, שמוצג כאן כ-lambda נלווה.
צריך לספק את יעד ההתחלה ב-builder של תרשים הניווט, יחד עם כל יעדי היעד האחרים שצריך לאפשר ניווט אליהם באמצעות בקר הניווט.
באפליקציה ל-Wear OS, מגדירים אתSwipeDismissableNavHost
כתוכן של AppScaffold
כדי לתמוך ברכיבים ברמה העליונה, כמו שעון, אינדיקטור גלילה/מיקום ואינדיקטור דף.
כדי להוסיף אובייקט TimeText
למסך כברירת מחדל ולוודא שהאנימציה שלו פועלת כמו שצריך כשמנווטים בין המסכים, אפשר להשתמש באובייקט AppScaffold
מעל SwipeDismissableNavHost
ו-ScreenScaffold
ברמת המסך.
בנוסף, 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 ) { // Screen content goes here
למידע נוסף על ניווט ב-Jetpack פיתוח נייטיב, אפשר לעיין במאמר ניווט באמצעות Compose או להשתתף בסדנת הקוד בנושא ניווט ב-Jetpack פיתוח נייטיב.
מומלץ עבורך
- הערה: טקסט הקישור מוצג כש-JavaScript מושבת
- העברת Jetpack Navigation ל-Navigation Compose
- ניווט באמצעות Compose
- ניווט בין המסכים באמצעות 'כתיבה'