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

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

مثال

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

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

مصادر إضافية

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