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

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

דוגמה

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

@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...

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

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