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

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

דוגמה

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

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

מידע חשוב על הקוד

שימו לב לפרטים הבאים בדוגמה הזו:

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

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

העברת פונקציה

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

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

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

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

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