רכבת ניווט

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

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

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

משטח API

אפשר להשתמש ב-composable‏ 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) } manages the state of the currently selected rail item.
  • ‫startDestination.ordinal מחזירה את האינדקס המספרי (המיקום) של רשומה בסוג הנתונים המונה Destination.SONGS.
• כשלוחצים על פריט בסרגל, מתבצעת קריאה ל-navController.navigate(route = destination.route) כדי לנווט למסך המתאים.
• פונקציית ה-lambda‏ onClick של NavigationRailItem מעדכנת את המצב selectedDestination כדי להדגיש חזותית את הפריט שנלחץ במסילה.
• הפונקציה קוראת ל-AppNavHost composable, מעבירה את navController ואת startDestination, כדי להציג את התוכן בפועל של המסך שנבחר.

התוצאה

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

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

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