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

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

مثال

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

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

مراجع إضافية

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