רכבת ניווט

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

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

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

פלטפורמת ה-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)
    }
}

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

  • ב-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, כדי להציג את התוכן בפועל של המסך שנבחר.

תוצאה

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

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

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