רכבת ניווט

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

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

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

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

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

התוצאה

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

סרגל ניווט אנכי עם 3 יעדים וסמלים משויכים: שירים, אלבום ופלייליסט. הסמלים מציינים באופן חזותי את המטרה של כל לחצן ניווט בחלונית. לכל יעד משויך סמל רלוונטי (למשל, תו מוזיקלי ל — **איור 2.** פס ניווט שמכיל 3 יעדים עם סמלים משויכים: שירים, אלבום ופלייליסט.