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

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

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

من الشائع استخدام مكتبة لتحميل صورة بشكل غير متزامن، مثل عند استخدام العنصر القابل للتجميع 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
        )
)
SharedElementCommonUseCaseSnippets.kt

نص

لإضافة تأثيرات متحركة إلى التغييرات في 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()
        )
)
SharedElementCommonUseCaseSnippets.kt

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