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