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