במדריך הזה מוסבר איך לגרום לסמל הניווט בסרגל האפליקציה העליון לבצע פעולות ניווט.
דוגמה
קטע הקוד הבא הוא דוגמה מינימלית להטמעה של סרגל אפליקציות עליון עם סמל ניווט פונקציונלי. במקרה הזה, הלחיצה על הסמל מעבירה את המשתמש ליעד הקודם באפליקציה:
@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...
מקורות מידע נוספים
למידע נוסף על הטמעת ניווט באפליקציה, אפשר לעיין בסדרת המדריכים הבאה: