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

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

مثال

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

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

مراجع إضافية

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