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

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

مثال

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

@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...

مراجع إضافية

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