סרגל הניווט

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

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

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

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

התוצאה

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

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

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