الانتقال من شريط التطبيق العلوي

يوضّح هذا الدليل كيفية جعل رمز التنقّل في شريط أعلى التطبيق يؤدي إجراءات التنقّل.

مثال

المقتطف التالي هو مثال بسيط على كيفية تنفيذ شريط أعلى التطبيق مع رمز تنقّل وظيفي. في هذه الحالة، ينقل الرمز المستخدم إلى وجهته السابقة في التطبيق:

@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),
        )
    }
}
AppBar.kt

النقاط الرئيسية حول الرمز

يُرجى ملاحظة ما يلي في هذا المثال:

  • يحدِّد العنصر القابل للتجميع TopBarNavigationExample مَعلمة navigateBack من النوع () -> Unit.
  • يتمّ ضبط القيمة navigateBack للمَعلمة navigationIcon في CenterAlignedTopAppBar.

وهكذا، عندما ينقر المستخدم على رمز التنقّل في أعلى التطبيق، يتم استدعاء navigateBack().

تمرير دالة

يستخدم هذا المثال سهم الرجوع للرمز. وبالتالي، يجب أن تنقل الوسيطة لسمة navigateBack() المستخدم إلى الوجهة السابقة.

لإجراء ذلك، أرسِل TopBarNavigationExample مكالمة إلى NavController.popBackStack(). ويمكنك إجراء ذلك في قسم إنشاء رسم بياني التنقّل. مثلاً:

NavHost(navController, startDestination = "home") {
    composable("topBarNavigationExample") {
        TopBarNavigationExample{ navController.popBackStack() }
    }
    // Other destinations...

مصادر إضافية

لمزيد من المعلومات حول كيفية تنفيذ التنقّل في تطبيقك، اطّلِع على السلسلة التالية من الأدلة: