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

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

مثال

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

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

مراجع إضافية

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