רכבת ניווט

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

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

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

פלטפורמת ה-API

כדי להטמיע מסילה באפליקציה, משתמשים בקוד NavigationRail קומפזבילי עם NavigationRailItem. התו NavigationRailItem מייצג פריט יחיד בעמודה של המסילה.

‫NavigationRailItem כולל את הפרמטרים העיקריים הבאים:

• ‫selected: קובע אם הפריט הנוכחי בסרגל מודגש חזותית.
• ‫onClick(): פונקציית lambda נדרשת שמגדירה את הפעולה שתתבצע כשהמשתמש ילחץ על פריט בסרגל. כאן בדרך כלל מטפלים באירועי ניווט, מעדכנים את מצב הפריט שנבחר בסרגל או טוענים תוכן תואם.
• ‫label: הצגת טקסט בפריט של המסילה. אופציונלי.
• ‫icon: הצגת סמל בפריט של פס הצד. אופציונלי.

דוגמה: סרגל ניווט צדדי

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

@Composable
fun NavigationRailExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        NavigationRail(modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                NavigationRailItem(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    icon = {
                        Icon(
                            destination.icon,
                            contentDescription = destination.contentDescription
                        )
                    },
                    label = { Text(destination.label) }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

נקודות עיקריות

• ‫NavigationRail מציג עמודה אנכית של פריטים בתוכן המומלץ, כשכל פריט תואם ל-Destination.
• ‫val navController = rememberNavController() יוצר וזוכר מופע של NavHostController, שמנהל את הניווט בתוך NavHost.
• ‫var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } קובע את המצב של הפריט שנבחר בחלונית.
  • ‫startDestination.ordinal מקבל את האינדקס המספרי (המיקום) של רשומת טיפוסים בני מנייה (enum) Destination.SONGS.
• כשלוחצים על פריט בסרגל, מתבצעת קריאה ל-navController.navigate(route = destination.route) כדי לנווט למסך המתאים.
• פונקציית ה-lambda‏ onClick של NavigationRailItem מעדכנת את המצב selectedDestination כדי להדגיש חזותית את הפריט שנלחץ במסילה.
• היא שולחת קריאה לרכיב הקומפוזבילי AppNavHost, ומעבירה את navController ואת startDestination, כדי להציג את התוכן בפועל של המסך שנבחר.

תוצאה

בתמונה הבאה מוצגת התוצאה של קטע הקוד הקודם:

מקורות מידע נוספים

• ‫Material 3 – סרגל ניווט
• ניווט באמצעות "פיתוח נייטיב"