ניווט מסרגל האפליקציה העליון

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

דוגמה

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

@Composable
fun TopBarNavigationExample(
    navigateBack: () -> Unit,
) {
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(
                        "Navigation example",
                    )
                },
                navigationIcon = {
                    IconButton(onClick = navigateBack) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
            )
        },
    ) { innerPadding ->
        Text(
            "Click the back button to pop from the back stack.",
            modifier = Modifier.padding(innerPadding),
        )
    }
}

נקודות עיקריות לגבי הקוד

שימו לב לנקודות הבאות בדוגמה הזו:

  • הרכיב הניתן לקיבוץ TopBarNavigationExample מגדיר פרמטר navigateBack מסוג () -> Unit.
  • הוא מעביר את הערך navigateBack לפרמטר navigationIcon של CenterAlignedTopAppBar.

לכן, בכל פעם שהמשתמש לוחץ בחזרה על סמל הניווט באפליקציה העליונה, הפעולה נשלחת אל navigateBack().

העברה של פונקציה

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

כדי לעשות זאת, מעבירים ל-TopBarNavigationExample קריאה ל-NavController.popBackStack(). עושים זאת כאשר יוצרים את תרשים הניווט. לדוגמה:

NavHost(navController, startDestination = "home") {
    composable("topBarNavigationExample") {
        TopBarNavigationExample{ navController.popBackStack() }
    }
    // Other destinations...

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

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