רכבת ניווט

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

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

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

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

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

התוצאה

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

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

• חומר 3 – פס ניווט
• ניווט באמצעות Compose