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

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

דוגמה

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

@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),
        )
    }
}
AppBar.kt

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

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

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

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

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

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

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

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

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

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