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