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