حالات الاستخدام الشائعة للعناصر المشتركة

عند تحريك العناصر المشتركة، هناك بعض حالات الاستخدام المحدّدة التي تتضمّن اقتراحات معيّنة.

الصور غير المتزامنة

من الشائع استخدام مكتبة لتحميل صورة بشكل غير متزامن، مثلاً عند استخدام الدالة المركّبة AsyncImage في Coil. لكي تعمل هذه الميزة بسلاسة بين دالتَين مركّبتَين، ننصح بضبط placeholderMemoryCacheKey() وmemoryCacheKey() على المفتاح نفسه كسلسلة مشتقة من مفتاح العنصر المشترَك، ليكون مفتاح ذاكرة التخزين المؤقت هو نفسه للعناصر المشترَكة المتطابقة. سيستخدم العنصر المشترَك الجديد ذاكرة التخزين المؤقت للعنصر المطابق له كعنصر نائب إلى أن يتم تحميل الصورة الجديدة.

في ما يلي الاستخدام المعتاد لـ AsyncImage:

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("your-image-url")
        .crossfade(true)
        .placeholderMemoryCacheKey("image-key") //  same key as shared element key
        .memoryCacheKey("image-key") // same key as shared element key
        .build(),
    placeholder = null,
    contentDescription = null,
    modifier = Modifier
        .size(120.dp)
        .sharedBounds(
            rememberSharedContentState(
                key = "image-key"
            ),
            animatedVisibilityScope = this
        )
)

نص

لإضافة تأثيرات حركية إلى تغييرات fontSize، استخدِم Modifier.sharedBounds() وresizeMode = ScaleToBounds(). هذا الانتقال يجعل تغيير الحجم سلسًا نسبيًا. يمكن تعديل المَعلمة contentScale لإضافة تأثيرات حركية إلى سمك خط أو نمط معيّن.

Text(
    text = "This is an example of how to share text",
    modifier = Modifier
        .wrapContentWidth()
        .sharedBounds(
            rememberSharedContentState(
                key = "shared Text"
            ),
            animatedVisibilityScope = this,
            enter = fadeIn(),
            exit = fadeOut(),
            resizeMode = SharedTransitionScope.ResizeMode.scaleToBounds()
        )
)

لا يتم تحريك تغييرات TextAlign تلقائيًا. بدلاً من ذلك، استخدِم Modifier.wrapContentSize() أو Modifier.wrapContentWidth() بدلاً من استخدام TextAlign مختلفة للانتقالات المشتركة.

السابق
تخصيص
التالي
مع ميزة التنقّل