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

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

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

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