רכבת ניווט

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

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

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

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

פלטפורמת ה-API

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

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

‫selected: קובע אם הפריט הנוכחי בסרגל מודגש חזותית.
‫onClick(): פונקציית למדה נדרשת שמגדירה את הפעולה שתתבצע כשהמשתמש ילחץ על פריט במדף. כאן בדרך כלל מטפלים באירועי ניווט, מעדכנים את המצב של פריט הסרגל שנבחר או טוענים תוכן תואם.
‫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) מופעלת כדי לעבור למסך המתאים.
פונקציית ה-lambda‏ onClick של NavigationRailItem מעדכנת את המצב selectedDestination כדי להדגיש חזותית את הפריט שנלחץ בסרגל.
הוא קורא ל-AppNavHost composable, מעביר את navController ואת startDestination, כדי להציג את התוכן בפועל של המסך שנבחר.

התוצאה

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

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