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

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

דוגמה

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

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

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

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