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

عند إضافة مؤثرات متحركة إلى العناصر المشترَكة، هناك بعض حالات الاستخدام التي تتضمن اقتراحات محدّدة.

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

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