סרגל הניווט

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

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

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

ממשק API

כדי להטמיע לוגיקה של החלפת יעד, משתמשים ברכיבים הניתנים לקישור NavigationBar ו-NavigationBarItem. כל NavigationBarItem מייצג יעד יחיד.

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

• selected: קובע אם הפריט הנוכחי מודגש באופן חזותי.
• onClick(): פונקציית lambda חובה שמגדירה את הפעולה שתתבצע כשהמשתמש לוחץ על הפריט. בדרך כלל כאן מטפלים באירועי ניווט, מעדכנים את מצב הפריט שנבחר או טוענים את התוכן התואם.
• label: הצגת טקסט בתוך הפריט. אופציונלי.
• icon: הצגת סמל בתוך הפריט. אופציונלי.

דוגמה: סרגל הניווט התחתון

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

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}
Navigation.kt

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

• NavigationBar מציג אוסף של פריטים, וכל פריט תואם ל-Destination.
• val navController = rememberNavController() יוצר ומאחסן מופע של NavHostController, שמנהל את הניווט ב-NavHost.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } מנהלת את המצב של הפריט שנבחר כרגע.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } מנהל את המצב של הפריט שנבחר כרגע.
  • startDestination.ordinal מקבל את האינדקס המספרי (המיקום) של הרשומה ב-enum‏ Destination.SONGS.
• כשמקליקים על פריט, מתבצעת קריאה ל-navController.navigate(route = destination.route) כדי לנווט למסך המתאים.
• הפונקציה onClick של NavigationBarItem מעדכנת את המצב selectedDestination כדי להדגיש באופן חזותי את הפריט שעליו לוחצים.
• הוא קורא ל-composable של AppNavHost, מעביר את navController ו-startDestination כדי להציג את התוכן בפועל של המסך שנבחר.

התוצאה

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

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

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