تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

نقل بيانات التنقّل في Jetpack إلى التنقّل Compose

تتيح لك واجهة برمجة التطبيقات Navigation Compose التنقّل بين الدوال المركّبة في تطبيق Compose، مع الاستفادة من مكوّن Jetpack Navigation وبنيته الأساسية وميزاته.

توضّح هذه الصفحة كيفية نقل البيانات من مكوّن Jetpack Navigation المستنِد إلى الأجزاء إلى Navigation Compose، كجزء من عملية نقل واجهة المستخدم الأكبر حجمًا المستنِدة إلى View إلى Jetpack Compose.

المتطلبات الأساسية لنقل البيانات

يمكنك نقل البيانات إلى Navigation Compose بعد استبدال جميع الأجزاء بدوال مركّبة للشاشة. يمكن أن تحتوي الدوال المركّبة للشاشة على مزيج من محتوى Compose وView، ولكن يجب أن تكون جميع وجهات التنقّل دوال مركّبة لإتاحة نقل بيانات Navigation Compose. وحتى ذلك الحين، يجب مواصلة استخدام مكوّن التنقّل المستند إلى الأجزاء في قاعدة الرموز البرمجية الخاصة بـ View وCompose القابلة للتشغيل التفاعلي. لمزيد من المعلومات، يمكنك الاطّلاع على مستندات التشغيل التفاعلي للتنقّل.

خطوات نقل البيانات

سواء كنت تتّبع استراتيجية نقل البيانات المقترَحة أو تتّبع نهجًا آخر، ستصل إلى مرحلة تكون فيها جميع وجهات التنقّل عبارة عن دوال مركّبة للشاشة، مع استخدام الأجزاء كحاويات دوال مركّبة فقط. في هذه المرحلة، يمكنك نقل البيانات إلى Navigation Compose.

إذا كان تطبيقك يتّبع حاليًا نمط تصميم تدفق البيانات أحادي الاتجاه ودليلنا حول البنية، لن يتطلّب الانتقال إلى Jetpack Compose وNavigation Compose إعادة هيكلة كبيرة للطبقات الأخرى في تطبيقك، باستثناء طبقة واجهة المستخدم.

لنقل البيانات إلى Navigation Compose، اتّبِع الخطوات التالية:

أضِف تبعية Navigation Compose إلى تطبيقك.

أنشئ دالة مركّبة App-level وأضِفها إلى Activity كنقطة دخول Compose، مع استبدال إعداد تنسيق العرض:

class SampleActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample)
        setContent {
            SampleApp(/* ... */)
        }
    }
}MigrationCommonScenariosSnippets.kt

أنشئ أنواعًا لكل وجهة تنقّل. استخدِم data object للوجهات التي لا تتطلّب أي بيانات، وdata class أو class للوجهات التي تتطلّب بيانات.
```
@Serializable data object First
@Serializable data class Second(val id: String)
@Serializable data object Third
MigrationCommonScenariosSnippets.kt
```
اضبط NavController في مكان يمكن لجميع الدوال المركّبة التي تحتاج إلى الرجوع إليه الوصول إليه (يكون هذا عادةً داخل الدالة المركّبة App). يتّبع هذا الأسلوب مبادئ نقل القيمة ويتيح لك استخدام NavController كمصدر موثوق للتنقّل بين الشاشات القابلة للإنشاء والحفاظ على الأنشطة السابقة:
```
@Composable
fun SampleApp() {
    val navController = rememberNavController()
    // ...
}MigrationCommonScenariosSnippets.kt
```

أنشئ NavHost لتطبيقك داخل الدالة المركّبة App ومرِّر navController:

@Composable
fun SampleApp() {
    val navController = rememberNavController()

    SampleNavHost(navController = navController)
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        // ...
    }
}MigrationCommonScenariosSnippets.kt

أضِف الوجهات الـ composable لإنشاء الرسم البياني للتنقّل. إذا سبق لك نقل كل شاشة إلى Compose، ستتألف هذه الخطوة فقط من استخراج الدوال المركّبة لهذه الشاشات من أجزاء Fragments إلى وجهات composable:

class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                // FirstScreen(...) EXTRACT FROM HERE
            }
        }
    }
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        composable<First> {
            FirstScreen(/* ... */) // EXTRACT TO HERE
        }
        composable<Second> {
            SecondScreen(/* ... */)
        }
        // ...
    }
}MigrationCommonScenariosSnippets.kt

إذا اتّبعت الإرشادات المتعلّقة ببنية واجهة مستخدم Compose، وخاصةً كيفية تمرير ViewModel وأحداث التنقّل إلى الدوال المركّبة، فإنّ الخطوة التالية هي تغيير طريقة تقديم ViewModel إلى كل دالة مركّبة للشاشة. يمكنك غالبًا استخدام حقن Hilt ونقطة التكامل الخاصة به مع Compose وNavigation من خلال hiltViewModel:
```
@Composable
fun FirstScreen(
    // viewModel: FirstViewModel = viewModel(),
    viewModel: FirstViewModel = hiltViewModel(),
    onButtonClick: () -> Unit = {},
) {
    // ...
}MigrationCommonScenariosSnippets.kt
```

استبدِل جميع طلبات التنقّل في findNavController() بطلبات navController، وأرسِلها كأحداث تنقّل إلى كل شاشة دالة مركّبة، بدلاً من إرسال navController بالكامل. يتّبع هذا النهج أفضل الممارسات لعرض الأحداث من الدوال المركّبة إلى المتصلين ويحافظ على navController كمصدر وحيد للحقيقة.

يمكن تمرير البيانات إلى وجهة معيّنة من خلال إنشاء مثيل لفئة المسار المحدّدة لتلك الوجهة. ويمكن بعد ذلك الحصول عليه إما مباشرةً من إدخال الأنشطة السابقة في الوجهة أو من ViewModel باستخدام SavedStateHandle.toRoute().

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        composable<First> {
            FirstScreen(
                onButtonClick = {
                    // findNavController().navigate(firstScreenToSecondScreenAction)
                    navController.navigate(Second(id = "ABC"))
                }
            )
        }
        composable<Second> { backStackEntry ->
            val secondRoute = backStackEntry.toRoute<Second>()
            SecondScreen(
                id = secondRoute.id,
                onIconClick = {
                    // findNavController().navigate(secondScreenToThirdScreenAction)
                    navController.navigate(Third)
                }
            )
        }
        // ...
    }
}MigrationCommonScenariosSnippets.kt

أزِل جميع الأجزاء وتنسيقات XML ذات الصلة والتنقّل غير الضروري والموارد الأخرى والاعتماديات القديمة على Fragment وJetpack Navigation.

يمكنك العثور على الخطوات نفسها مع مزيد من التفاصيل المتعلّقة بـ Navigation Compose في مستندات الإعداد.

حالات الاستخدام الشائعة

بغض النظر عن مكوّن التنقّل الذي تستخدمه، تنطبق مبادئ التنقّل نفسها.

تشمل حالات الاستخدام الشائعة عند نقل البيانات ما يلي:

لمزيد من المعلومات التفصيلية حول حالات الاستخدام هذه، يُرجى الاطّلاع على التنقّل باستخدام Compose.

استرداد البيانات المعقّدة أثناء التنقّل

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

إذا كانت مكوّنات Fragments تمرّر عناصر معقّدة كوسيطات، ننصحك بإعادة تصميم الرمز البرمجي أولاً بطريقة تسمح بتخزين هذه العناصر واسترجاعها من طبقة البيانات. يمكنك الاطّلاع على مستودع Now in Android للحصول على أمثلة.

القيود

يصف هذا القسم القيود الحالية في Navigation Compose.

النقل التدريجي إلى Navigation Compose

لا يمكنك حاليًا استخدام Navigation Compose مع استخدام Fragments كوجهات في الرمز البرمجي. لبدء استخدام Navigation Compose، يجب أن تكون جميع وجهاتك دوال مركّبة. يمكنك تتبُّع طلب الميزة هذا في Issue Tracker.

الصور المتحركة للانتقال

بدءًا من الإصدار Navigation 2.7.0-alpha01، أصبح ضبط الانتقالات المخصّصة، التي كانت تتم سابقًا من خلال AnimatedNavHost، متاحًا الآن مباشرةً في NavHost. يمكنك قراءة ملاحظات الإصدار لمزيد من المعلومات.

مزيد من المعلومات

لمزيد من المعلومات حول نقل البيانات إلى Navigation Compose، يُرجى الاطّلاع على المراجع التالية:

الدرس التطبيقي حول الترميز في Navigation Compose: تعرَّف على أساسيات Navigation Compose من خلال درس تطبيقي عملي حول الترميز.
مستودع Now in Android: تطبيق Android يعمل بكامل وظائفه تم إنشاؤه بالكامل باستخدام Kotlin وJetpack Compose، ويتّبع أفضل ممارسات التصميم والتطوير في Android ويتضمّن Navigation Compose.
نقل بيانات Sunflower إلى Jetpack Compose: منشور مدوّنة يوثّق رحلة نقل بيانات نموذج تطبيق Sunflower من Views إلى Compose، والذي يتضمّن أيضًا نقل البيانات إلى Navigation Compose.
‫Jetnews لكل شاشة: منشور مدوّنة يوضّح عملية إعادة تصميم نموذج Jetnews ونقله ليتوافق مع جميع الشاشات باستخدام Jetpack Compose وNavigation Compose.

التطبيقات المقترَحة لك

ملاحظة: يتم عرض نص الرابط عندما يكون JavaScript غير مفعَّل
التنقّل باستخدام Compose
Compose والمكتبات الأخرى
اعتبارات أخرى