يوضّح هذا الدليل كيف يمكنك جعل رمز التنقّل في شريط التطبيق العلوي ينفّذ إجراءات التنقّل.
مثال
تعرض القصاصة التالية مثالاً بسيطًا على كيفية تنفيذ شريط تطبيق علوي يتضمّن رمز تنقّل عمليًا. في هذه الحالة، ينقل الرمز المستخدم إلى وجهته السابقة في التطبيق:
@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...
مراجع إضافية
لمزيد من المعلومات حول كيفية تنفيذ التنقّل في تطبيقك، اطّلِع على سلسلة الأدلة التالية:
- التنقّل باستخدام Compose
- إنشاء NavController
- تصميم الرسم البياني للتنقّل
- الانتقال إلى عنصر قابل للإنشاء