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

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

مثال

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

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

مصادر إضافية

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