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

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

مثال

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

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

مراجع إضافية

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